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相关的内容：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。