- 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
其处理方式有所不同。
网友评论