CSS 盒子模型(Box Model)
盒子模型的简介：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
大致了解了盒子模型的基本概念之后，让我们看一下盒子模型的基本组成：
盒子模型由一下四部分组成：
组成部分（图片）：
对于盒子的总大小：盒子的大小 = content + 左右 padding + 左右 border
而对于外边距margin，其不会影响盒子的大小，但会影响盒子的位置。
当我们想要查看一个元素的盒子模型，我们可以使用一下的操作：
右击想要查看的元素：
在开发者工具中：
这样我们就可以看到html中指定元素的盒子模型，这对我们之后对于网页的排版由重大的作用。
在了解了盒子模型的基本概念和盒子模型的基本概念之后，让我们深入讲解盒子模型的各个组成部分。
（1）content区
content区的主要作用为：用于显示文本和图像，即元素中的内容。
在盒子模型中的位置：
content区可设置的属性：
| CSS属性名 | 功能 | 属性值 |
| width | 设置内容区域宽度 | 长度 |
| max-width | 设置内容区域的最大宽度 | 长度 |
| min-width | 设置内容区域的最小宽度 | 长度 |
| height | 设置内容区域的高度 | 长度 |
| max-height | 设置内容区域的最大高度 | 长度 |
| min-height | 设置内容区域的最小高度 | 长度 |
先对width和height属性进行讲解：
例：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.27.css"> </head> <body> <div>这是一段文字</div> </body> </html>
CSS代码：
/* 对div元素设置其content区的宽高 */ div { width: 500px; height: 300px; background-color: orange; }
这样我们就了解了如何对内容区（content）设置其宽与高。
对于max-width和min-width（max-height和min-height同理），为如果视口（用户在网页上的可见区域）小于min-width设置的值，视口就会出现滑动条（如图）：
而max-width用于设定元素的最大宽度：
CSS代码：
/* 对div元素设置其content区的最大宽度 */ div { max-width: 900px; height: 300px; background-color: orange; }
不够就以视口大小为准：
足够就以设定最大值为准：
这样我们就了解了content区的常见属性。
注意：
max-width 、min-width 一般不与 width 一起使用。
max-height 、min-height 一般不与 height 一起使用。
补充：
1. 总宽度 = 父的content — 自身的左右margin 。
2. 内容区的宽度 = 父的content — 自身的左右margin — 自身的左右border — 自身的左右padding 。
（2）padding区
padding区的主要作用为：清除内容周围的区域，并且内边距是透明的。
在盒子模型中的位置：
当我们设置了html中的元素的padding值之后：
CSS代码：（以上面的案例为例）
/* 对div元素设置其content区的宽高和padding区的大小 */ div { width: 900px; height: 300px; padding: 10px; background-color: orange; }
当然padding区也有其相关的属性：
| CSS 属性名 | 功能 | 属性值 |
| padding-top | 设置上内边距 | 长度 |
| padding-right | 设置右内边距 | 长度 |
| padding-bottom | 设置下内边距 | 长度 |
| padding-left | 设置左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置 1 ~ 4 个值 |
在上面的案例中我们就是使用了padding的复合属性设置了一圈的padding值（都设置为10px）
而padding 复合属性的使用规则：
1. padding: 10px; 四个方向内边距都是 10px 。
2. padding: 10px 20px; 上10px ，左右20px 。（上下、左右）
3. padding: 10px 20px 30px; 上10px ，左右20px ，下30px 。（上、左右、下）
4. padding: 10px 20px 30px 40px; 上10px ，右20px ，下30px ，左40px 。（上、右、下、左）
注意点：
1. padding 的值不能为负数。
2. 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。
3. 块级元素、行内块元素，四个方向内边距都可以完美设置。
这样我们就大致了解了盒子模型中padding的设置与作用。
（3）border区
border区的主要作用为：设置围绕在内边距和内容外的边框。
在盒子模型中的位置：
其实该属性在------------------------------------------------------------------------------------------------------------->CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）-CSDN博客
中的表格属性其他元素也可以使用的表格属性中已经详细讲解过，这里只是迅速过一下：
| CSS属性名 | 功能 | 属性值 |
| border-style | 设置边框线风格 | none ： 默认值 solid ： 实线 dashed ： 虚线 dotted ： 点线 double ： 双实线 ...... |
| border-width | 设置边框线宽度 | 长度 |
| border-color | 设置边框线颜色 | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量要求。 |
| border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color |
分别设置各个方向的边框 | 值没有顺序和数量要求。 |
补充：border-style 、border-width 、border-color 其实也是复合属性。
（4）margin区
border区的主要作用为：用于清除边框外的区域，外边距是透明的。
在盒子模型中的位置：
margin的相关属性和padding类似，只不过margin是设置在border之外，而padding设置的为border之内。
margin的相关属性：
| CSS属性名 | 功能 | 属性值 |
| margin-left | 左外边距 | CSS 中的长度值 |
| margin-right | 右外边距 | CSS 中的长度值 |
| margin-top | 上外边距 | CSS 中的长度值 |
| margin-bottom | 下外边距 | CSS 中的长度值 |
| margin | 复合属性，可以写1~4 个值，规律同padding （顺时针） | CSS 中的长度值 |
margin 注意事项：
1. 子元素的margin ，是参考父元素的content 计算的。（因为是父亲的content 中承装着子元素）
2. 上margin 、左margin ：影响自己的位置；下margin 、右margin ：影响后面兄弟元素的位置。
3. 块级元素、行内块元素，均可以完美地设置四个方向的margin ；但行内元素，左右margin 可以完美设置，上下margin 设置无效。
4. margin 的值也可以是 auto ，如果给一个块级元素设置左右margin 都为 auto ，该块级元素会在父元素中水平居中。
5. margin 的值可以是负值。
在了解完margin之后，我们需要了解有关margin的两个特性：margin 塌陷和 margin 合并
【1】margin 塌陷
那么什么是margin塌陷呢？
即第一个子元素的上margin 会作用在父元素上，最后一个子元素的下margin 会作用在父元素上。
例如：（没有设置margin之前）
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.27.css"> </head> <body> <div class="outer"> <div class="inner">这是内部的div元素</div> </div> </body> </html>
CSS代码：
.outer { width: 500px; height: 400px; background-color: orange; } .inner { width: 200px; height: 100px; background-color: green; }
给内部元素设置margin-top属性：
CSS代码：
.outer { width: 500px; height: 400px; background-color: orange; } .inner { margin-top: 30px; width: 200px; height: 100px; background-color: green; }
我们会发现，margin-top没有加到inner元素上，而是加到了outer元素（即其父元素）上，这就是margin塌陷，margin-bottom同理。
那么如何解决呢？
解决方案：
方案一： 给父元素设置不为 0 的padding 。
方案二： 给父元素设置宽度不为 0 的border 。
方案三：给父元素设置 css 样式 overflow:hidden
了解了margin塌陷之后我们在来讲解margin 合并。
【2】margin 合并
什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
例如：（没有设置margin-top和margin-bottom之前）
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.27.css"> </head> <body> <div class="outer"> <div class="inner1">这是内部的div元素</div> <div class="inner2">这是内部的div元素</div> </div> </body> </html>
CSS代码：
.outer { width: 500px; height: 400px; background-color: orange; } .inner1 { width: 200px; height: 100px; background-color: green; } .inner2 { width: 200px; height: 100px; background-color: red; }
给内部元素设置margin-top和margin-botton属性之后：
CSS代码：
.outer { width: 500px; height: 400px; background-color: orange; } .inner1 { width: 200px; height: 100px; margin-bottom: 20px; background-color: green; } .inner2 { width: 200px; height: 100px; margin-top: 20px; background-color: red; }
原本应该为40px，但是实际上就只有20px，这就是margin 合并。
那么如何解决 margin 塌陷问题呢？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了，一下就给40px即可。
这样盒子模型的大致内容我们就都了解完了！
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)