CSS盒模型

一：盒子模型介绍

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容。

---

二：盒子模型组成

1.边框border

border可以设置元素的边框。边框由三部分组成：边框宽度（粗细），边框样式，边框颜色。

border : border-width || border-style || border-color;

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的复合写法：

border : 1px solid auqa;

边框分开写：

border-top : 5px dotted brown;

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，两种解决方法：
1.测量盒子大小的时候不测量边框。
2.如果测量的时候包括了边框，则需要width/height减去边框宽度。

---

2.内边距padding

padding 属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding属性复合写法：
padding属性（简写属性）可以有一到四个值。

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素 左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding: 5px 10px 20px 30px;	4个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素

padding内边距也会影响盒子的实际大小

如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子

---

3.外边距margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
marigin-top	上外边距
margin-bottom	下外边距

margin复合写法代表意义和padding一致

外边距典型应用

1.让块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定了宽度。
2.盒子左右外边距都设置为auto

margin: 0 auto;

2.外边距合并问题
利用margin定义垂直外边距，可能出现垂直外边距合并问题。
（1）相邻块元素垂直外边距合并

当上下相邻的两个元素相遇时，如果上面的元素下外边距margin-bottom，下面元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom和margin-top之和，而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距合并。

（2）嵌套块元素垂直外边距的塌陷问题

对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距。

解决方案：
1.可以为父元素定义上边框。
2.可以为父元素定义上内边距。
3.可以为父元素添加overflow: hidden。

三：清除内外边距

 * {
 	padding：0；
 	margin: 0;
}

---