【一·两种盒模型】
标准盒模型 ：
实际宽度 = 边框*2+内边距*2+200
200 = 200
.content-box{
box-sizing:content-box;
}
怪异盒模型：
实际宽度 = 设置的px宽度
200 = 边框 + 内边距
.border-box{
box-sizing:border-box;
}
【二·外边距折叠】
A 盒子外边距 20px
B 盒子外边距 10px
浏览器渲染的时候 只取它们中最大的那个
【三·文档流】
元素会自动 从左到右，从上到下 的流式排列
注意：
1.正常布局下， 块级元素会独占一行，行内元素才会从左到右排列
2.如果某个元素用到了定位，那么元素就会脱离，前后的元素会忽略它的位置，则这个元素会按着指定的位置重新定位，如果没指定位置，则会按着脱离文档流之前的位置进行定位。
3.浮动属性(float)，也会脱离文档流，与定位不同的，定位不会影响文字，而浮动会影响到后面的文字，会环绕在元素周围
【四·页面层级】
浏览器渲染机制 = 标准文档流 -> 浮动(float) -> 绝对定位
1.如果对层级关系不满意，可以使用 z-index 属性来调整
2.可以设计对每一个层级都设置一个使用范围，可以优化层级关系
比如： 内容层 100-200 / 导航层 200-300 / 蒙版层 300-400
注意：z-index 属性最好不要随便使用
网友评论