盒子模型

1、盒子模型的组成

组成元素	说明
margin	外边距
border	边框
padding	内边距
content	实际内容

---

2、边框（border）

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

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

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

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

2.1、边框的复合写法

border: border-width border-style border-color
border: 1px solid red; 

注意：没有顺序，按上述约定进行规范

2.2、边框分写

• 上边框：border-top
• 下边框：border-bottom
• 左边框：border-left
• 右边框：border-right

---

3、内边距（padding）

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

• 上内边距：padding-top
• 下内边距：padding-bottom
• 左内边距：padding-left
• 右内边距：padding-right

注意：

• 内边距也会影响盒子的实际大小
• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

3.1、内边距的复合属性

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

---

4、 外边距（margin）

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

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

• margin简写方式代表的意义和padding完全一致

4.1、外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为auto

   margin: 0 auto;
   

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center即可。

4.2、外边距合并

使用margin定于块元素的垂直外边距时，可能会出现外边距的合并。

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

解决方案：

• 可以为父元素定义上边框
• 可以为父元素定义上内边距
• 可以为父元素添加overflow: hidden

---

5、清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们可以在布局前，首先清除下网页元素的内外边距：

* {
	padding: 0;  
	margin: 0
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块元素或行内块元素就可以了