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