页面结构基础

【一·两种盒模型】

标准盒模型 ：

实际宽度 = 边框*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 属性最好不要随便使用