CSS 盒子模型是一个蕴含多个属性的容器, 其中包含边框, 边距, 填充和内容自身。它用于创立网页的设计和布局。它能够用作自定义不同元素布局的工具包。Web 浏览器依据 CSS 框模型将每个元素出现为矩形框。
Box-Model 在 CSS 中具备多个属性。其中一些如下：
- 边界
- 边距
- 填充
- 内容
下图阐明了盒子模型。
边区：它是框的边距和边距之间的区域。其尺寸由边框的宽度和高度给出。
保证金区域：该区域由边界和边距之间的空间组成。边距区域的尺寸是边距框宽度和边距框高度。将元素与其相邻元素离开是很有用的。
填充区域：它包含元素的填充。该区域实际上是内容区域四周和边框内的空间。其尺寸由填充盒的宽度和填充盒的高度给出。
内容范畴：该区域蕴含诸如文本, 图像或其余媒体内容之类的内容。它受内容边缘的限度, 其尺寸由内容框的宽度和高度确定。
范例 1：
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size:36px;
font-weight:bold;
Text-align:center;
}
.gfg {
margin-left:60px;
border:50px solid #009900;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.gfg1 {
font-size:42px;
font-weight:bold;
color:#009900;
margin-top:60px;
background-color:#c5c5db;
}
.gfg2 {
font-size:18px;
font-weight:bold;
background-color:#c5c5db;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">lsbin</div>
<div class = "gfg2">A computer science portal for geeks</div>
</div>
</body>
</html>范例 2：
<!DOCTYPE html>
<head>
<style>
.main {
font-size:32px;
font-weight:bold;
text-align:center;
}
#box {
padding-top:40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align:center;
font-size:32px;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div id = "box">lsbin</div>
</body>
</html>输入如下：
更多前端开发相干内容请参考：lsbin – IT 开发技术：https://www.lsbin.com/
查看以下更多 CSS 相干的内容：
- CSS 主动调整图像大小：https://www.lsbin.com/3757.html
- Materialize CSS 面包屑导航：https://www.lsbin.com/3626.html
- CSS Flexbox 高级布局：https://www.lsbin.com/3545.html