CSS 框模型(Box Model)
在网页布局里，每个 HTML 元素都可视作矩形框。该矩形框由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成，这种独特的结构，被称作框模型，也叫盒模型。
以下是基于 CSS 框模型构建的层级可视化，Margin ￫ Border ￫ Padding ￫ Content结构演示：
外边距 Margin
-
-
-
-
边框 Border
-
-
-
-
内边距 Padding
-
-
-
-
内容 Content [width × height]
框模型的基本组成
- 外边距(margin)：边框外的透明区域，用于与其他元素分隔。
- 边框(border)：围绕内容和内边距的线。
- 内边距(padding)：内容周围的透明区域。
- 内容(content)：显示实际内容的区域。
框模型的计算
默认情况下，元素的总宽度和总高度的计算公式为：
- 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
下面我们通过实例来计算一下<div>的总宽度和总高度：
div {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}元素的总宽度和总高度计算结果如下：
- 总宽度(370px) = 300px(宽度) + 40px(左右内边距) + 10px(左右边框) + 20px(左右外边距)
- 总高度(270px) = 200px(高度) + 40px(上下内边距) + 10px(上下边框) + 20px(上下外边距)
评论区 0
发表评论
教程介绍
CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。
36
章节
76
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈