【CSS学习笔记10】-盒子模型 Box Model

在CSS中，术语“盒子模型”用于谈论设计和布局。

CSS 框模型本质上是一个环绕每个 HTML 元素的框。 它包括：边距、边框、填充和实际内容。下图说明了盒子模型：

不同部分的说明：

• 内容Content - 显示文本和图像的框的内容
• 填充Padding - 清除内容周围的区域。填充是透明的
• 边框Border - 围绕填充和内容的边框
• 边距Margin - 清除边界外的区域。边距为 透明
  盒子模型允许我们在元素周围添加边框，并定义空间 元素之间。

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

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

320px (width)

• 20px (left + right padding)
• 10px (left + right border)
• 0px (left + right margin)
  = 350px

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

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

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

元素总高度 = 高度 + 顶部填充 + 底部填充 + 顶部填充 边框 + 下边框 + 上边距 + 下边距