盒模型

盒模型

认识盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”。示例图如下：

因此我们可以知道width、height不是盒子总宽高。

盒子的总宽度 = width + 左右padding + 左右border

盒子的总高度 = height + 上下padding + 上下border

width和height属性详解

width属性

width属性表示盒子内容的宽度，单位通常是px，移动端开发也会涉及百分数、rem等单位。当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承。

height属性

height属性表示盒子内容的高度，同样单位通常是px，移动端开发也会涉及百分数、rem等单位，盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。

padding属性详解

padding是盒子的内边距，即盒子边框内壁到文字的距离，padding有四个方向，可以分别用小属性进行设置。如下表：

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

padding的四数值写法

padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding。示例如下：

padding: 10px 20px 30px 40px;

依次对应着上边10px、右边20px、下边30px、左边40px。

padding的三数值写法

padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding。示例如下：

padding: 10px 20px 30px;

padding的二数值写法

padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding。示例如下：

padding: 10px 20px;

margin属性详解

margin是盒子的外边距，即盒子和其他盒子之间的距离。与padding属性一样，margin也有四个方向。示例如下：

小属性	意义
margin-top	上margin，“向上踹”
margin-right	右margin，“向右踹”
margin-bottom	下margin，“向下踹”
margin-left	左margin，“向左踹”

margin的塌陷

竖直方向的margin有塌陷现象：小的margin会塌陷到大的 margin中，从而margin不叠加，只以大值为准。示例图如下：

如上图所示，上面的盒子向下踹100px，下面的盒子向上踹60px，因为竖直方向的margin不叠加 以大数为准，所以实际两个盒子之间间距为100px。

一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除。示例如下：

* {
    margin: 0;
    padding: 0;
}

通配符选择器（*）表示选择所有元素，但通配符有效率问题，所以最好应该使用并集选择器。示例如下：

body,ul,p {
    margin: 0;
    padding: 0;

盒子的水平居中

将盒子左右两边的margin都设置为auto，盒子将水平居中，示例如下：

.box {
    /* 上下是0，左右自动 */
    margin: 0 auto;
}

需要注意的是，文本居中是text-align: center; 和盒子水平居中是两个概念 。

box-sizing属性

将盒子添加了box-sizing: border-box; 之后，盒子的width 、height数字就表示盒子实际占有的宽高（不含margin） 了，即padding、border变为“内缩”的，不再“外扩”。示例代码如下：

.para1 {
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    padding: 30px;
    border: 30px solid rgb(16, 28, 204);
    margin-bottom: 100px;
    margin-left: 300px;
}

可以看到添加box-sizing属性后，盒子的宽高由300px变为180px，这是因为padding、border由“外扩”变为“内缩”了。

box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少。