css那些事儿2 盒子模型

盒子模型是网页元素所占据页面窗口的矩形范围，是网页布局的核心基础之一，这里的盒子模型与我们平常收到的包裹类似。

一个包裹从内到外，分为真实物品部分，物品与外壳之间的填充区，外壳的厚度，当多个包裹放置在一起，包裹与包裹之间的距离等要素组成。那么放到网页布局来说，也就是盒子模型。盒子是一个矩形区域，他从内

到外分为宽高度，填充，边框，边距。外边距就是该元素占据的矩形空间。元素标签通常所设置的宽高值的是内容区域的大小，从内向外看一次为填充，边框，边距，而填充区域也为背景区域。

1 两个相邻块元素，在垂直方向边距不会存在叠加效应，这个时候选取上下元素2者中边距最大者作为真实边距

1.1 两普通文档刘中的上下垂直方向

1.2 两普通文档流中包含关系，容器与容器的子元素 取较大者

1.3 没有高度的块元素

2 两相邻内联元素（inline-block），即一行内在水平方向上存在边距叠加效应。

3 绝对布局中必须指定元素宽高，因此绝对布局无法做到宽高自适应。

4 使用div+css与table布局的比较

1） 维护方面：css样式使用外联文件方式分离，易于维护，同时利于网络请求，还有css的选择符使得css代码复用

2）结构方面：table结果复杂，不利于重构

5 绝对定位和相对定位

绝对定位：是当前元素处于有指定定位的祖先元素为参考，进行绝对位置设置，也就是说将当前元素指定为绝对定位后，他将向上级节点寻找是否存在有指定定位设置的元素作为祖先参考，直到找到html根节点

绝对定位脱离文档流，因此后面的元素会占据该元素之前的位置，而元素本身将叠加在现有元素上面，因此z-index也就专门为这些脱离文档流的元素所设计

相对定位：相对定位并不脱离文档流，相应的常常用来设定元素的定位，或者设置左上右下的位置进行偏移，但是但是，即便是该元素在显示效果上偏移了，但是实际本身原有位置任然属于该元素本身，也就是说

后续元素不会占据该元素原有位置。