阅读时间：6min目标：学习盒子模型的基本理论，了解盒子模型的工作原理，理解盒子模型与替代模型的区别，以及如何切换。先决条件：HTML和CSS的基础知识。在CSS中，所有的元素都被一个个“盒子”包围着。了解这些“盒子”的基本原理是使用CSS实现精确布局和处理元素排列的关键。什么是CSS盒子模型？完整的CSS盒模型适用于块级盒，内联盒仅使用盒模型中定义的部分内容。该模型定义了框的每个部分——边距、边框、填充和内容——它们共同创建了我们在页面上看到的内容。盒模型的每一部分都需要在CSS中组成一个块级的盒：内容盒该区域用于显示内容，可以通过设置宽高来设置大小。填充框包围内容区域外的空白区域；大小由padding相关属性设置。边框框边框框包裹内容和填充。大小通过边框相关属性设置。边距框这是最外面的区域，框和其他元素之间的空白区域。大小是通过边距相关属性设置的。如下图所示：标准框模型在标准模型中，如果给框设置了宽高，实际上设置的是内容框。padding和border与设置的宽度和高度一起决定了整个盒子的大小。见下文。假设您定义了宽度、高度、边距、边框和填充：.box{width:350px;高度：150px；边距：25px；填充：25px；border:5pxsolidblack;}如果使用标准模型width=410px(350+25+25+5+5),height=210px(150+25+25+5+5),paddingplusborderpluscontentbox.注意：边距不计入实际大小——当然，它会影响框在页面上占据的空间，但会影响框外的空间。框的范围在边界处结束——它不会延伸到边距。块级框和行内框在CSS中我们广泛使用两种“框”——块级框（blockboxes）和行内框（inlineboxes）。这两种类型的框在页面流和元素之间的关系方面表现不同：块级框的特点是在行内方向扩展并占据父容器该方向上的所有可用空间。空间，在大多数情况下意味着盒子将与父容器一样宽。每个盒子都会包装。宽度和高度属性可以发挥作用。padding、margin和border会将其他元素从当前框周围“推开”。除非另有说明，否则标题（

等）和段落（

）等项默认为块级框。内联框的特征框不会生成换行符。width和height属性将不起作用。应用了垂直填充、边距和边框，但不会将其他内联框推开。应用水平填充、边距和边框并将其他内联框推开。元素用作链接，、和默认都是内联的。我们通过设置盒子的display属性来控制盒子对外显示的类型，比如inline或者block。补充：内、外显类型这里最好也说明一下内、外显类型。上面说了，css盒子模型有一个externaldisplaytype，它决定了盒子是block-level还是inline。同样的盒子模型还有一个内部显示类型，它决定了盒子内部元素的布局方式。默认情况下，它们以正常文档流布局，这意味着它们的行为类似于其他块和内联元素（如上所述）。但是，我们可以通过使用类似flex的显示属性值来更改内部显示类型。如果设置了display:flex，在一个元素上，外部显示类型为block，内部显示类型改为flex。这个盒子的所有直接子元素都将成为弹性元素，并根据弹性盒子的规则进行布局。使用BrowserDevTools勾选盒子模型你的浏览器开发者工具可以让你更容易理解盒子模型。如果您在Firefox的DevTools中查看一个元素，您可以看到该元素的大小以及它的边距、填充和边框。这是一个检查元素大小的好方法，方便判断你的盒子大小是否符合预期！学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好！我是〖编程三昧〗的作者汪山人，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！