盒子模型是网页元素所占据页面窗口的矩形范围，是网页布局的核心基础之一，这里的盒子模型与我们平常收到的包裹类似。
一个包裹从内到外，分为真实物品部分，物品与外壳之间的填充区，外壳的厚度，当多个包裹放置在一起，包裹与包裹之间的距离等要素组成。那么放到网页布局来说，也就是盒子模型。盒子是一个矩形区域，他从内
到外分为宽高度，填充，边框，边距。外边距就是该元素占据的矩形空间。元素标签通常所设置的宽高值的是内容区域的大小，从内向外看一次为填充，边框，边距，而填充区域也为背景区域。
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也就专门为这些脱离文档流的元素所设计
相对定位：相对定位并不脱离文档流，相应的常常用来设定元素的定位，或者设置左上右下的位置进行偏移，但是但是，即便是该元素在显示效果上偏移了，但是实际本身原有位置任然属于该元素本身，也就是说
后续元素不会占据该元素原有位置。