《css必知必会》(层叠样式表)

一、盒子模型

浏览器中将元素表示为一个个矩形的盒子（box），css决定盒子的属性，这一标准称为盒模型。
每个盒子由四部分组成：内容区域 content area、内边距区域 padding area、边距区域 border area、外边距区域 margin area。
Note: box-sizing可以改变盒子模型的计算方式，IE中盒子模型的宽度只有width(..早点放弃它吧)。

二、css优先级。

!important => 内联样式 => ID选择器 => 类选择器&属性选择器&伪类选择器 => 类型选择器&伪元素
Note: https://specifishity.com/specifishity.pdf

三、margin重叠。

块的上下边距在：“同层相邻元素之间”、“没有内容将父元素和后代元素分开”、“空的块级元素”，情况下会产生边距重叠，其大小为单个边距的最大值(如果它们相等，则仅为其中一个)，合理把握这一特点可提高效率。
Note:上边距与下边距重叠。

四、margin下沉。

子元素设置margin-top后导致父元素一同下沉，设置父元素的border、padding、overflow:hidden等可以避免下沉。也可以使用padding代替margin使用。

五、BFC(块级格式上下文)。

简单来说，可以理解为具有bfc特性的盒子是一个独立的渲染区。通过这一特性可以解决上面margin重叠塌陷等问题，在浮动定位中也有很大的作用。
Note:如何让盒子具有BFC特性自行百度。

六、z-index。

Note:只在定位元素上生效（如：absolute relative），并且z-index 是同级元素之间的层级堆叠

七、padding-bottom为percentage。

当内边距为百分比时，百分比是和本身包含的元素的宽度有关。

八、用css实现一个三角形。

运用border均分特性

{
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}