CSS盒模型详解

盒子模型

前言

盒子模型，英文叫box model。无论是div、span，还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

盒子模型的示意图：

添加效果图

标准盒模型和IE盒模型

在CSS中，盒模型有两种：标准盒模型和IE盒模型。

标准盒模型

在标准盒模型中，盒子的实际宽度 = width + padding + border。

也就是说，我们设置的width和height只是内容区域的宽高，不包括padding和border。

css

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid #000;
}

在上面的例子中，盒子的实际宽度是 200px + 10px2 + 5px2 = 230px。

IE盒模型

在IE盒模型中，盒子的实际宽度 = width。

也就是说，我们设置的width和height包括了content、padding和border。

css

.box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid #000;
}

在上面的例子中，盒子的实际宽度是 200px，而内容区域的宽度是 200px - 10px2 - 5px2 = 170px。

box-sizing属性

CSS3中新增了box-sizing属性，允许我们自由地切换盒模型。

box-sizing: content-box; 标准盒模型（默认值）
box-sizing: border-box; IE盒模型

在实际开发中，为了更方便地控制元素的尺寸，我们通常会使用IE盒模型，即设置box-sizing: border-box;。

width和height

width和height属性用于设置盒子内容区域的宽度和高度。

宽度的单位

宽度的单位有很多种，常用的有：

px：像素，固定单位
%：相对于父元素的百分比
em：相对于当前元素的字体大小
rem：相对于根元素的字体大小
vw：相对于视口宽度的百分比
vh：相对于视口高度的百分比

默认宽度

对于块级元素，如果不设置宽度，那么它的宽度是父元素的100%。

对于行内元素，宽度由内容决定，不能设置宽度。

最大宽度和最小宽度

我们可以通过max-width和min-width来设置元素的最大宽度和最小宽度。

css

.box {
    width: 50%;
    max-width: 800px;
    min-width: 400px;
}

上面的代码表示，盒子的宽度是父元素的50%，但不能超过800px，也不能小于400px。

高度的特点

对于块级元素，如果不设置高度，那么它的高度由内容决定。

对于行内元素，高度由内容决定，不能设置高度。

padding

padding属性用于设置盒子的内边距，即内容区域到边框的距离。

padding的单位

padding的单位有很多种，常用的有：

px：像素，固定单位
%：相对于父元素宽度的百分比
em：相对于当前元素的字体大小
rem：相对于根元素的字体大小

padding的设置方式

padding有四个方向：上、右、下、左。我们可以分别设置四个方向的padding，也可以使用简写形式。

css

/* 分别设置四个方向的padding */
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

/* 简写形式 */
.box {
    /* 上、右、下、左 */
    padding: 10px 20px 30px 40px;
}

/* 上下、左右 */
.box {
    padding: 10px 20px;
}

/* 上、左右、下 */
.box {
    padding: 10px 20px 30px;
}

/* 四个方向相同 */
.box {
    padding: 10px;
}

padding对盒子尺寸的影响

在标准盒模型中，padding会增加盒子的实际尺寸。

css

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
}

在上面的例子中，盒子的实际宽度是 200px + 10px*2 = 220px。

但是，如果我们使用IE盒模型，那么padding不会增加盒子的实际尺寸。

css

.box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
}

在上面的例子中，盒子的实际宽度是 200px，而内容区域的宽度是 200px - 10px*2 = 180px。

border

border属性用于设置盒子的边框。

border的组成

border由三部分组成：宽度、样式、颜色。

css

.box {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}

/* 简写形式 */
.box {
    border: 1px solid #000;
}

border-style

border-style属性用于设置边框的样式，常用的值有：

solid：实线
dashed：虚线
dotted：点线
double：双线
none：无边框（默认值）

border的设置方式

border有四个方向：上、右、下、左。我们可以分别设置四个方向的border，也可以使用简写形式。

css

/* 分别设置四个方向的border */
.box {
    border-top: 1px solid #000;
    border-right: 2px dashed #f00;
    border-bottom: 3px dotted #0f0;
    border-left: 4px double #00f;
}

/* 简写形式 */
.box {
    border: 1px solid #000;
}

border对盒子尺寸的影响

在标准盒模型中，border会增加盒子的实际尺寸。

css

.box {
    width: 200px;
    height: 100px;
    border: 5px solid #000;
}

在上面的例子中，盒子的实际宽度是 200px + 5px*2 = 210px。

但是，如果我们使用IE盒模型，那么border不会增加盒子的实际尺寸。

css

.box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    border: 5px solid #000;
}

在上面的例子中，盒子的实际宽度是 200px，而内容区域的宽度是 200px - 5px*2 = 190px。

margin

margin属性用于设置盒子的外边距，即盒子与其他盒子之间的距离。

margin的单位

margin的单位有很多种，常用的有：

px：像素，固定单位
%：相对于父元素宽度的百分比
em：相对于当前元素的字体大小
rem：相对于根元素的字体大小
auto：浏览器自动计算

margin的设置方式

margin有四个方向：上、右、下、左。我们可以分别设置四个方向的margin，也可以使用简写形式。

css

/* 分别设置四个方向的margin */
.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

/* 简写形式 */
.box {
    /* 上、右、下、左 */
    margin: 10px 20px 30px 40px;
}

/* 上下、左右 */
.box {
    margin: 10px 20px;
}

/* 上、左右、下 */
.box {
    margin: 10px 20px 30px;
}

/* 四个方向相同 */
.box {
    margin: 10px;
}

margin的特殊值：auto

当我们设置margin: 0 auto;时，表示上下边距为0，左右边距自动计算。这样可以使块级元素在父元素中水平居中。

css

.box {
    width: 200px;
    margin: 0 auto;
}

margin的特性

1. margin合并

当两个垂直方向的margin相遇时，它们会合并成一个margin，值等于两个margin中的较大值。

html

<div class="box1"></div>
<div class="box2"></div>

css

.box1 {
    margin-bottom: 20px;
}
.box2 {
    margin-top: 30px;
}

在上面的例子中，box1和box2之间的实际距离是30px，而不是50px。

2. margin塌陷

当父元素没有设置border、padding、overflow:hidden等属性时，子元素的margin-top会传递给父元素，导致父元素一起向下移动。

html

<div class="parent">
    <div class="child"></div>
</div>

css

.parent {
    width: 200px;
    height: 200px;
    background-color: #f00;
}
.child {
    width: 100px;
    height: 100px;
    background-color: #0f0;
    margin-top: 50px;
}

在上面的例子中，child元素会有50px的上边距，但是这个边距会传递给parent元素，导致parent元素也向下移动50px。

解决方法：

给父元素设置border
给父元素设置padding
给父元素设置overflow:hidden
给父元素设置浮动
给父元素设置定位

总结

盒子模型是CSS中非常重要的概念，它包括内容区域、内边距、边框和外边距四个部分。

在实际开发中，我们通常会使用IE盒模型，即设置box-sizing: border-box;，这样可以更方便地控制元素的尺寸。

此外，我们还需要注意margin的合并和塌陷现象，以及如何解决这些问题。

掌握盒子模型的概念和使用方法，对于布局和样式的控制至关重要。

CSS盒模型详解 ​

盒子模型 ​

前言 ​

盒子中的区域 ​

标准盒模型和IE盒模型 ​

标准盒模型 ​

IE盒模型 ​

box-sizing属性 ​

width和height ​

宽度的单位 ​

默认宽度 ​

最大宽度和最小宽度 ​

高度的特点 ​

padding ​

padding的单位 ​

padding的设置方式 ​

padding对盒子尺寸的影响 ​

border ​

border的组成 ​

border-style ​

border的设置方式 ​

border对盒子尺寸的影响 ​

margin ​

margin的单位 ​

margin的设置方式 ​

margin的特殊值：auto ​

margin的特性 ​

1. margin合并 ​

2. margin塌陷 ​

总结 ​