CSS 盒子模型

所有 HTML 元素都可以被视为框。

在 CSS 中，术语 "box model" 用于谈论设计和布局。

CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子。它由：内容、填充、边框和边距组成。下图展示了盒子模型：

不同部分的解释：

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

盒子模型演示：

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

元素的宽度和高度

为了在所有浏览器中正确设置元素的宽度和高度，您需要了解盒模型的工作原理。

重要的：当你用CSS设置元素的宽度和高度属性时，你只需设置元素的宽度和高度内容区。要计算元素的总宽度和高度，还必须包括内边距和边框。

此 <div> 元素的总宽度为 350px，总高度为 80px：

div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

计算如下：

320px（内容区域的宽度）
+ 20px（左内边距+右内边距）
+ 10px（左边框+右边框）
= 350px（总宽度）

50px（内容区域的高度）
+ 20px（顶部内边距+底部内边距）
+ 10px（上边框+下边框）
= 80px（总高度）

元素的总宽度应按如下方式计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框

元素的总高度应如下计算：

元素总高度 = 高度 + 顶部内边距 + 底部内边距 + 顶部边框 + 底部边框

笔记：margin 属性还会影响框在页面上占用的总空间，但边距不包含在框的实际大小中。框的总宽度和高度在边界处停止。