css权威指南笔记
2020-01-05 本文已影响0人
treeQQ
- html元素分为替换元素和非替换元素
img元素就是个替换元素，显示内容由外部提供
span是个非替换元素，内容由用户代理（通常一个浏览器）显示 - 后代选择器和子选择器
后代选择器用空格做分隔，子选择器用>分隔，子选择器只选择子元素，隔代后代不能被选择 -
特殊性
选择器的特殊性值表现为四个部分 0， 0 ，0， 0
选择器中给定的各个id值加 0， 1，0，0
选择器中给定的各个class或者属性选择或者伪类值加 0， 0，1，0
选择器中给定的各个元素和伪元素值加 0，0，0，1
结合符和通配选择器对特殊性没有任何共享
image.png
- 特殊性值的第一个位是为内联样式保留的
- 选择器 特殊性为0， 0 ，0， 0。继承的样式没有特殊性。所以选择器的属性会优先于继承的熟悉。
-
font-weight回退机制
如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：
如果指定的权重值在 400和 500之间（包括400和500）：
按升序查找指定值与500之间的可用权重；
如果未找到匹配项，按降序查找小于指定值的可用权重；
如果未找到匹配项，按升序查找大于500的可用权重。
如果指定值小于400，按降序查找小于指定值的可用权重。 如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。
如果指定值大于500，按升序查找大于指定值的可用权重。 如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。
以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。 - vertical-align只用于行内元素和表格单元格和替换元素。应用到表格单元格时，只能识别baseline、top、middle和bottom
bottom是行内元素框的底边与line-height对应的行框底边对齐。text-bottom是元素框的底边与行内字体的底基准线对齐。 - white-space属性值为normal时候，连续的空白符会被合并，换行符会被当作空白符来处理。
比如 <div>a八个空格b</div> 会显示为 a b - 垂直方向，若两元素为父子关系。只有父元素在垂直的margin方向上无padding和border，才会发生 margin合并。发生合并后，父元素的高度值为auto的话，实际高度将不包含子元素的被合并的margin。
- 正常流中一个块元素的
margin-top或margin-bottom设置为auto会自动计算为0.对于定位元素来说上下边距为auto其处理方式有所不同。
