掌握盒模型是掌握布局的前提，它的构成如下图所示

由内到外分别由内容（content）即蓝色部分，内边距（padding）即绿色部分，边框（border）即浅黄色部分，外边距（margin）即深黄色四大部分组成，下面我将为读者从各个组成部分与盒模型分类两个角度来具体讲解盒模型。

组成部分

组成部分我主要针对内边距，边框以及外边距

内边距

语法

内边距padding，它是内容与边框之间的距离，共有四个方向，可以通过设置来改变每个方向的距离，我通过码上掘金来演示效果

通过上述演示我们知道了可以通过padding设置内边距的大小，而且其值的数量为1~4个，效果各不同，不同数量的设置的效果看如下表格

而演示的效果呈现了盒子的大小不同，这点将会在下文中盒模型分类中介绍具体原因。

注意事项

1. 行内元素不会将水平padding大小计算在盒模型内，垂直方向不受影响，块级元素padding各个方向都会计算在内
2. 一些标签元素会内置padding大小，如果需要更改则需要利用优先级进行覆盖
3. padding不支持负值，但是可以设置百分比，且四个方向的百分比值都是根据宽度计算。

应用

在我的经验里padding经常用于增加点击区域的大小，如果内容过小，用户点击需要点击多次，而了布局也不能更改，内容是由字体大小决定的，所以可以通过改变内边距大小扩大可点击区域，增强用户体验。

我们还可以利用padding百分比值的特性设置一些特定比例的内容，如2:4的头像。

边框

语法

边框border是内边距与外边距之间的夹层，它可以通过三种属性来设置指定容器边框样式、粗细和颜色。

也可以对不同方向设置不同的样式例如：border-left-style:solid;设置左侧边框的样式为实线

也可以直接使用border缩写这三种属性，顺序：border:1px solid #ccc;

好玩的边框

可以控制边框样式来绘制三角形，当盒子的高度和宽度都为0的时候就会出现下面的形状

当高度宽度都设置为0的时候，那么其就会呈现以上的效果，如果把三个方向的颜色设置为透明，那么就会成功绘制出一个三角形！！ 那么我考一考各位，如何用这种方法绘制一个梯形？

外边距

语法

外边距margin定义了元素周围的空间大小，具有四个方向，与padding数值不同的是它可以使用负值，外边距的演示如下。

注意细节

外边距最需要注意的是其外边距合并的问题，相邻的元素之间的外边距大小遵循一个规则：“正正按大，正负相加，负负最小”，解释一下，当两个元素相邻的时候，其距离按两元素最大的外边距宽度，如果两个元素的外边距大小有正有负，则距离为两个数值之和，如果两个元素的外边距距离都为负值，那么其宽度按最小的值来计算，下面通过演示来体会这个规则

应用

margin最大的使用场景是标题，文本，图片等信息的间隔，让整体的信息流显得很宽阔，这里我不再赘述，下面讲解一下两种盒模型。

盒模型分类

有两种盒模型，其规则各不同，分别为content-box与border-box，可以通过box-sizing来设置，其中默认值为content-box

content-box

content-box中padding和border不被包含在定义的width和height之内，所以其元素的宽度与高度等于设定的高度与宽度与对应方向的padding与border的和

例如下面的盒子，默认为content-box

.box {
    width:100px;
    padding:20px;
    border:1px solid black;
}
复制代码

其宽度为：100px+(20px+1px)*2 = 142px

border-box

border-box中padding和border被包含在定义的width和height之内，所以其宽度和高度取决于设定的宽度与高度

.box {
    box-sizing:border-box;
    width:100px;
    padding:20px;
    border:1px solid black;
}
复制代码

其宽度为：100px