盒子模型的

• 简介：
• css处理网页时，它认为每个元素都包含在一个不可见的盒子里。
• 把所有元素想象成盒子，那么对网页的布局就相当于摆放盒子。
• 我们只需要将响应的盒子摆放到网页中相应的位置即可完成网页布局。

 内容：width/height  width 100%可随可见区域变化   height 100%不可变高度无限

 内边距：padding     表示形式 四边相等 一个数字表示      四个数字：上左下右 顺时针方向

  边框：border     边框粗细 边框形式（solid dashed dotted） 颜色   无连写顺序

border会影响盒子大小：解决盒子显示大小问题：

box-sizing:border-box;

     外边距：margin

外边距折叠现象

纵向：上下margin合并，两者距离为他们margin中的最大值；

横向：左右两个盒子外边距的取值以两个外边距的和为准；

塌陷现象：

在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的

父子元素塌陷：父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的

margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。

清除盒子内外边距：*{margin：0；

padding：0；

}

盒子模型居中模型

水平居中

margin：0  auto    块元素水平居中

margin-top：固定值实现百分比，以可视窗口为参考；

行内元素文本水平居中

text-align：center（水平）

line-height：盒子高度（垂直）