一文搞懂 CSS 盒子模型：概念、种类、布局方式、边距塌陷全都在这里了(1)

本文链接：https://blog.csdn.net/2401_84097393/article/details/137722427

本文详细解析了CSS盒子模型，包括border-box模式的作用、替换元素的特点、不同盒子类型（块级、行内和内部布局）以及边距塌陷现象。同时介绍了前端开发中如何利用display属性创建流式和栅格布局，并推荐了一份全面的前端学习资料，覆盖从基础到进阶的知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.box {

width: 300px;

height: 200px;

padding: 10px;

border: 5px solid lightblue;

margin: 20px;

}

运行效果（点击这里查看真实的示例，可用谷歌开发者工具）：

在这里插入图片描述

border-box

如果把 box-sizing 的值改成 border-box，那么 width 和 height 属性就是分别设置盒子的最终宽度和高度

.box {

box-sizing: border-box; /* … */

}

在这里插入图片描述

可以通过浏览器开发者工具看到真实的内容宽度变成了 270，高度变成了 170，加上边框和间距之后，才是设置的 width 和 height 的值

特殊的盒子-替换元素

css 盒子模型中还有一种特殊的盒子：替换元素。替换元素是说，它们加载的是外部内容，并不会受现有的 CSS 属性的影响。常见的替换元素有 <img> 、 <iframe> 、 <video> 等，这些标签都是用来加载外部文件的，当前 HTML 页面中的 CSS 样式并不会影响它们的内容，比如说 <iframe> 标签加载的子页面，不会受当前页面的 CSS 影响。不过，可以通过 CSS 来控制替换元素在盒子中的位置，比如说用 <img/> 加载一张图片，我们可以限制 <img/> 盒子的宽高，然后利用 object-fit 属性，让图片等比例占满整个盒子，裁掉显示不下的部分，然后通过 object-position 来设置图片在盒子中的位置，可以是靠下或者居中等：

<img

src=“https://upload.wikimedia.org/wikipedia/commons/3/3f/Jammu_kashmir_pangong_lake-1920x1080.jpg”

alt=“”

img {

width: 300px;

height: 300px;

object-fit: cover;

object-position: center;

}

在这里插入图片描述

盒子的布局方式

多个盒子之间会有不同的布局方式，它是通过设置显示类型来实现的。根据盒子本身与外部相邻的其他盒子之间的排列方式，还有盒子内部的子盒子之间的排列方式，我们可以把它们分为外部显示类型和内部显示类型两种。

外部显示类型

外部显示类型控制的是相邻盒子之间的布局，分为块级盒子和行内盒子两种。它们是浏览器默认的布局方式。

块级盒子

块级盒子，比如 div，p，h1 等，它的宽度（指盒子的整体宽度）会占满整个浏览器，并且后边的盒子会被挤占到下一行去显示。

这是块级元素

这是另一块级元素

在这里插入图片描述

行内盒子

行内盒子比如 span, a 等，它的宽度是内容的宽度，后边的盒子会跟在它的后边继续排列。

在里边有一个行内元素

这是另一块级元素

在这里插入图片描述

它们两者的区别是：

行内盒子无法手动设置宽高，并且垂直方向上的 padding 和 margin 虽然能够设置生效，但并不会挤占其他盒子的空间，会导致重叠。不过水平方向上的则会挤占其他盒子的空间:

在里边有一个行内元素

这是另一块级元素

.inline {

width: 100px;

height: 100px;

margin: 25px;

padding: 25px;

}

在这里插入图片描述

块级盒子的宽高、padding 和 margin 则都会生效并且挤占空间。

在里边有一个块级元素

这是另一块级元素

p {

width: 200px;

height: 30px;

margin: 24px;

padding: 5px;

}

在这里插入图片描述

内部显示类型

内部显示类型则是控制这个盒子内部的子盒子之间的排列方式，上边说的 block 块级和 inline 行内盒子是正常的文档流，块级盒子内部的盒子也是按照这种方式排列，要注意的是行内盒子里边只能有行内盒子，不能有块级盒子。我们可以通过设置 display 的值来修改内部盒子的排列方式。

比如设置为 flex 可以变成流式布局 :

在里边有一个块级元素

这是另一块级元素

.container {

display: flex;

}

在这里插入图片描述

设置为 grid 可以变成栅格布局，它们属于非正常的文档流。

在里边有一个块级元素

这是另一块级元素

.container {

display: grid;

}

在这里插入图片描述

inline-block 显示类型

如果想让一个盒子的外部类型保持 inline 行内状态，不把后边的盒子挤占到下一行，但是又想同时设置宽高、padding 和 margin，那么可以使用 inline-block 这个显示类型，这样这个盒子就有了宽高，并且无论是水平还是垂直方向上的 padding 和 margin，都可以把周围的盒子的空间挤占掉。

在里边有一个行内元素

这是另一块级元素

.inlineBlock {

display: inline-block;

wdith: 300px;

padding: 20px;

margin: 20px;

}

在这里插入图片描述

边距塌陷

CSS 盒子模型中，有一个问题需要特别注意一下，如果给两个盒子同时设置外边距，那么它们最终的距离很可能并不是两个盒子的外边距之和，这种情况会发生在相邻盒子之间，也会发生在父子盒子之间。当它们同时设置了边距时，如果都是正数，则取最大值，如果相同，则取其中之一，如果有正有负，则取最大的正数加上最小的负数之和，如果都是负数，则取最小值。