CSS盒模型
CSS盒模型描述了HTML元素在页面中所占据的空间结构，它把每个HTML元素都看作是一个矩形的盒子。这个盒子由四个部分构成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
CSS中有两种盒模型：标准盒模型（Content Box）和IE盒模型（Border Box）。
-
标准盒模型：在标准盒模型中，元素的宽度和高度（
width和height属性）只包含内容部分，不包含内边距、边框和外边距。即：元素在页面上实际占据的宽度（或高度）= width（或 height） + padding + border + margin。 -
IE盒模型：在IE盒模型中，元素的宽度和高度（
width和height属性）包含了内容、内边距和边框部分，不包含外边距。即：元素实际占据的宽度（或高度）= width（或 height） + margin。使用box-sizing: border-box;属性可以将元素的盒模型切换为IE盒模型。
以下是一个简单的 HTML 和 CSS 代码示例来展示盒模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Model Example</title>
<style>
.box {
width: 200px;
height: 150px;
background-color: lightblue;
padding: 20px;
border: 5px solid gray;
margin: 30px;
}
</style>
</head>
<body>
<div class="box">
标准盒模型。
</div>
</body>
</html>
我们在CSS中设置元素的width为200px，但是元素在页面中实际显示的宽度为249.33px，是由width + padding + border + margin 计算后得到的。
通过设置 box-sizing: border-box; 属性将元素的盒模型切换为IE盒模型，则元素在页面中实际显示的大小明显减少了，可以看到元素的实际显示宽度为200px，包含了padding和border，其内容的实际宽度只有150px。
总结
盒模型是布局的基础，无论是浮动布局、定位布局还是现代的Flex弹性布局和Grid布局，都基于盒模型的概念。现代浏览器中盒模型都表现一致，但在老旧的浏览器中可能存在差异，特别是在box-sizing属性的处理上。
