CSS盒模型

盒模型是 CSS 中一个重要的概念，主要使用在网页的设计和布局中。网页开发中，任何元素都可以理解为一个盒子。

盒模型概述

下图为盒模型的示意图

盒模型规从内到外是盒子中元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。

一.margin:外边距

1.属性

元素周围的空白就是外边距，是透明的，不会遮挡后面的元素。
其上下左右四个方向可以使用 margin-top、margin-bottom、margin-left、margin-right 来分别设置。也可以使用margin，后可以写一到四个数，分别为顺时针上、右、下、左。

• 一个数：上、下、左、右相等。
• 二个数：第一个数等于上下外边距，第二个数等于左右外边距。
• 三个数：上、右、下边距，左默认等于右。
• 四个数：上、右、下、左 的边距。
• 当margin: 0 auto; ，块级盒子在父容器中水平居中。

2.多个盒子之间的外边距

（1）水平排放：间距是margin的累加

（2）垂直排列:合并取二者中的最大值

（3）父、子盒子的垂直外边距
子盒子添加上外边距后，父、子盒子同时下移，父、子盒子外边距合并。
消除影响的办法：

• 父盒子添加 overflow：hidden（最常使用）
• 父盒子添加 padding
• 父盒子添加 border

二.border：边框

元素的边框是围绕内边距的一条或多条线。

1.border-style

border-style 的常用属性值：
none：无边框
hidden：无边框
dotted：点状边框
dashed：虚线边框
solid：实线边框
double：双线边框
基本语法如下：值有1~4个，意义与margin一样；

border-style:dotted solid dashed double; /*分别设置上、右、下、左边框的样式*/

2.border-width和border-color

边框样式为none,则宽度为0，看做没有边框，所以边框样式不是 none 时才会起作用。
border-width 的属性值：
thin：细边框
medium：默认，中等边框
thick：粗边框
length：自定义边框宽度，使用带单位的数值（不可为负）
border-color：值有1~4个，意义与margin一样；
基本语法如下：

border-color:red green blue yellow; /*分别设置四个边框的颜色*/

3.border添加方式

使用 border 属性，提供三个属性值，分别代表边框宽度、边框样式和颜色，没有前后顺序
代码示例如下：

border: 5px solid red;

三.padding：内边距

内边距规定元素边框与元素内容之间的区域。
padding 属性用于设置内容与边框之间的填充区域，可以写 1～4 个值，同 margin。
基本语法如下：

padding:25px 50px 30px 60px; /* 分别设置上、右、下、左的内边距 */