# 基础测试
答对0-2道：初学者，糊里糊涂的切图仔
答对3-4道：中级开发者，写过无数页面，但不求甚解
答对5-6道：沉着稳重的老司机，平时有较多人向你请教问题吧
答对7-8道：前端大佬，团队里的核心
全对：专家
问
- 行内元素拥有盒模型吗？
- 可以设置宽度和高度吗？
<input> <select> <button>是什么元素？- 行内元素浮动后，display会变成什么？
- 行内元素可以包含块级元素吗？
- 行内元素可以相互嵌套吗？
- 哪种不可以嵌套？
- 块级元素可以相互嵌套吗？
- 哪种不可以嵌套？
- margin 在行内元素和块级元素的表现是什么样的，那么padding呢？
答
- 行内元素拥有盒模型吗？ 答：有
- 可以设置宽度和高度吗？ 答：不可以
<img> <input> <select> <button>是什么元素？ 答：替换元素- 行内元素浮动后，display会变变成什么? 答：inline-block
- 行内元素可以包含块级元素吗？ 答：标准不可以，但浏览器对语义嵌套约束有容错处理，通常不会出现异常（详见底部知识扩展）
- 行内元素可以相互嵌套吗？ 答：语义嵌套约束及严格嵌套约束的标签不可以
- 哪些不可以嵌套？ 答：严格嵌套约束如a标签不允许嵌套交互式元素如 a标签 button select等。语意嵌套约束如：li只能用于ul或ol下，dd、dt用于dl下，thead、tbody tr td 用于table下。
- 块级元素可以相互嵌套吗？ 答：同6
- 哪些不可以嵌套？ 答：p标签不允许嵌套块级元素
- margin 在行内元素和块级元素的表现是什么样的，那么padding呢？ 答：margin行内元素上下无效，左右生效。padding行内元素上下左右均生效，但是上下不占位不影响重排。块级元素两者上下左右均生效。
# margin重叠知多少
相邻元素重叠 父子重叠
如果两个margin都是正值，那么取margin值最大那个，例如父元素设置margin-top为20px，而子元素也设置了margin-top为50px，那么最终是以子元素的margin-top为准；
如果两个margin值为一正一负，则最终的margin值以这两个margin值相加的结果为准；
如果两个margin值都为负数，则取这两个负margin值中绝对值最大的那个负margin值为准；
只有上下会重叠，左右不重叠
# css小数计算
css尽量不要用小数，除了增加计算压力，不同浏览器下问题多，css计算和渲染是两回事
- 在ie6 7向下取整
- 在ie8下，<=38.5会被解析成38， >38.5会被解析成39。（非常规的四舍五入)
- 在ie9下，<38.5会被解析成38，>=38.5会被解析成39（常规的四舍五入)
- 在chrome,在firefox，同ie9，遵守常规的四舍五入
- 在firefox下，计算非常多都小数位，chrome只计算小数点后两位。
- Safari同ie 67直接取整
- 常见bug 3等分33.333%，易出现1像素的间隙。
# css选择器的权重
标签的权重为1，class的权重为10，id的权重为100，行内样式1000。数值只是便于理解，10个class权重并不能干掉1个id
# display:none和visibility:hidden的区别？
- 空间占据
- 回流和渲染
- 株连性
# 知识扩展
- 替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，几乎所有的替换元素都是行内元素，其表现类似于inline-block 非替换元素：即将内容直接表现给用户端
- w3c HTML4\XHTML标准里规定，行内元素只可以包含行内元素，块级元素可以包含行内元素和块级元素。 html4标准下的的任何doctype声明都不允许a标签嵌套div，这属于语义嵌套约束。除此之外，还有严格嵌套约束，例如a标签不允许嵌套交互式元素如 a标签 button select等，p标签不允许嵌套块级元素。 严格约束在所有的浏览器下都不被允许，而语义约束，浏览器大多会容错处理，但生成的文档树可能不太一样（因为标准没有定义容错行为）。因此你经常会看到行内元素不要嵌套块级元素的说法，它不符合标准，而且可能会导致偏离预期的结果。其他语意嵌套约束还有：li只能用于ul或ol下，dd、dt用于dl下，thead、tbody tr td 用于table下。
- html5标准 html5出现之前，元素按照block、inline、inline-block来区分, 依靠css来区分标签，显然不是一种合理的方式。在html5中，元素不再按照display来区分，而是按照元素内容模型（content model） (opens new window)来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一个类别，被称为穿透的；元素可能属于不止一个类别，称为混合的。
友情提示
开头的基础测试纯属娱乐，如果不知道的较多，是可以说明基础较差，需要补习一下功课了