【青训营】CSS（三）

选择器特异度 Specificity

特异度也就是优先级，如果设置样式时有多个CSS选择器同时指向一个元素，那么优先级高的选择器的元素样式会最终应用到这个元素上。

当然!important优先级是最高的，没有这个属性就可以从id，(伪)类，标签选择器的数量来判断优先级，如图中 122 > 022，所以第一条优先级高于第二条。

继承

与面向对象中的继承类似，某些属性会自动继承其父元素的计算值，除非显示指定。

如果一个属性不能被继承，但想要其继承，可以显示继承，如：

* {
  box-sizing: inherit;
}
html {
  /* html所有元素的盒模型都默认为border-box */
  box-sizing: border-box;
}
复制代码

CSS取值过程

CSS中每个属性都有一个初始值，比如：

• background-color的初始值为transparent
• margin-left的初始值为0

我们可以使用initial关键字作为属性值显式重置为初始值。

而CSS样式规则应用到DOM树中要经过以下取值过程：

• filtering：筛选规则，选择器匹配，属性有效，@media匹配等
• cascading：根据选择器优先级赋值
• defaulting：属性值为空时，继承或使用初始值
• resolving：将一些相对值转为绝对值，比如em会被转为px
• formatting：进一步将关键字以及百分比等转换为绝对值
• constraining：将px小数转为整数，又或是类似min-height的限制

布局Layout

当你没有用任何CSS来改变页面布局时，那么网页元素就会排列在一个常规流（normal flow）之中。在常规流中，元素盒子（boxes）会基于文档的写作模式（writing mode）一个接一个地排列，也就是说，如果你的写作模式是水平的（从左往右写），那么常规流会垂直地一个接着一个排列块级元素。

你写在网页里的任何东西都会生成一个盒子（box），关于盒模型的部分可以看以下文档：

• MDN - Introduction to the CSS basic box model
• W3C - CSS Box Model Module Level 3

width height

• 指定content box的宽高
• 取值为长度，百分数，auto
• auto由浏览器根据其它属性决定
• 百分数相对于容器的content box的宽高
• 容器有指定高度时，height的百分数才生效

padding

内边距，百分数相对于容器宽度，当有四个值时顺序为上右下左，也就是顺时针

border

边框粗细，样式，颜色

/* width | style | color */
border: 2px dashed green;
border-width: 1px 2px 3px 4px;
border-style: solid;
boder-color: green blue;
border-left: 1px solid #ccc;
border-left-width: 3px;
border-top-color: #ccc;
复制代码

我们甚至可以用border来画一个三角形：

<style>
  div {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: #f35 transparent transparent transparent;
  }
</style>
<div></div>
复制代码

margin

外边框，百分数相对于容器宽度，与padding类似

• 使用margin: 0 atuo;水平居中
• margin-collapse垂直方向上临近的外边距会出现叠加或者说合并的情况