《CSS in depth》笔记（第一章）

盒模型：默认为width和height不包括border/padding, 改成box-sizing: border-box之后，包括border和padding。

cascade: 层叠，即CSS中的C。它决定了当样式冲突的时候，如何确定为元素应用哪一个样式。有6个影响因素：

样式表来源：代码里写的样式叫author style, 此外还有user style, （以谷歌的Chrome为例，它会在用户的个人配置信息目录中生成一个名为Default\User StyleSheets\Custom.css的文件。添加到这个文件中的任何样式都会被用于用户访问的所有网站），和user-agent style, 即浏览器默认样式。三者的优先级排序是，author > user > user-agent。浏览器默认样式一般包括，h1-h6和p标签给个上下margin, ol和li给个左边的padding, 链接的颜色，和默认字号。

考虑了加important的规则后，总的优先级逆序如下

来源无法区分时，接下来考虑是否内联样式。内联样式的优先级高于非内联。非内联只有加了important才能覆盖内联样式，内联样式加了important的话，谁都覆盖不了它。

上述无法区分时，浏览器开始考虑选择器的特异性。所谓的特异性，遵循下面的顺序：

更多ID选择器 , 更多类名（包括伪类选择器和属性选择器），更多标签名。全局选择器 * 和 关系选择器（>, +, ~）对优先级没有影响。

上述无法区分时，按照选择器在代码中出现的顺序，后面的覆盖前面的。

层叠值：最后页面呈现的样式值。

一般有2个原则，不要用ID选择器，不要轻易加important.因为会导致样式难以覆盖。

CSS中有4个特殊值，initial, inherit, unset, revert

CSS关键字：initial、inherit、unset、revertinherit 继承、initial初始值、uns – 掘金

CSS简写：下面3个是等价的。

padding: 1em 2em;

padding: 1em 2em 1em;

padding: 1em 2em 1em 2em;