盒模型

CSS盒模型本质上就是一个盒子，盒子包裹着HTML元素，目前一共有两个盒模型，一种是W3C盒子模型 （标准盒模型），一种是IE盒子模型（怪异盒模型）。

W3C盒子模型（标准盒模型）

在开发中，元素默认就是标准盒，也可以通过box-sizing:content-box设置元素为标准盒模型。

标准盒模型的宽高计算方式：

css 复制代码

width = content-width
height = content-height

通过box-sizing；border-box来设置元素为怪异盒模型。

怪异盒模型的宽高计算方式：

css 复制代码

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

相邻两个块级元素会发生外边距合并的情况，MDN中的定义：

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距合并。

BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

触发BFC几种方式：

使用BFC能够使元素避免外边距合并和元素高度塌陷的问题。

选择器权重有四个等级：

第一等级：代表内联样式，如style=""，权值为 1000

第二等级：代表id选择器，如#content，权值为100

第三等级：代表类，伪类和属性选择器，如.content，权值为10

第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

一个元素中权重相同的不同选择器对同一属性进行了设置，后面的选择器会覆盖前面选择器相同的属性。选择器的权重也可以相加，例如：

span的权值为 = id选择器100+类选择器10+元素选择器1 = 111

注意：有11个元素选择器和1个类选择器同时选中同一元素时，权级高的选择器的样式会生效。因为权值不能跃迁，也就意味着无论有多少个0级的选择器，生效的仍然是1级选择器，因为选择器的权级无法跃迁。

!important会覆盖任何其他声明，当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。一些经验法则：