css高级篇之层叠样式表点豆成兵

css

CSS不是一门很复杂的语言，通常可以在短时间内学会，会导致很多知识点停留在表面。
它是网页视觉呈现中最富创造力的语言，有着赋予页面生命的神奇力量。一个页面从布局到效果到响应式无不体现着css的智慧。
一个专业的前端实现，不应该如蜻蜓点水，对css要充分了解，才能发挥出价值，才能把每一个元素变成强健的战士，共同组合成优质的页面。

死亡10连问

1. 行内元素拥有盒模型吗？
2. 可以设置宽度和高度吗？
3. <input> <select> <button>是什么元素？
4. 行内元素浮动后，display会变成什么？
5. 行内元素可以包含块级元素吗？
6. 行内元素可以相互嵌套吗？
7. 哪种不可以嵌套？
8. 块级元素可以相互嵌套吗？
9. 哪种不可以嵌套？
10. margin 在行内元素和块级元素的表现是什么样的，那么padding呢？

答案

1. 行内元素拥有盒模型吗？
   答：有
2. 可以设置宽度和高度吗？
   答：不可以
3. <img> <input> <select> <button>是什么元素？
   答：替换元素
4. 行内元素浮动后，display会变变成什么?
   答：inline-block
5. 行内元素可以包含块级元素吗？
   答：知识扩展：见文章底部*2
6. 行内元素可以相互嵌套吗？
7. 哪种不可以嵌套？
8. 块级元素可以相互嵌套吗？
9. 哪种不可以嵌套？
10. 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直接取整

background css3实用性

background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

margin padding上下百分比到底好不好？

百分比是根据父层的宽度计算的，padding，margin这样的属性上下用百分比的时候，最终的结果是根据父层的宽度计算的，而不是根据父层的高度，响应式调整时，通常父级宽度会发生较大改变。
建议： margin padding上下不用百分比，不利于间距的统一。

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）来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一个类别，被称为穿透的；元素可能属于不止一个类别，称为混合的。