网页上可以显示的组件由一个或多个矩形框组成。
CSS盒子模型是一个包含许多隔离专区,例如边缘(edge),边框(border),填充(padding)和material。它用于开发网页的设计和结构。它可以用作一组工具来个性化不同组件的布局。根据CSS盒模型,Web浏览器将每个元素提供为一个方形棱镜。
下图说明了 width , height ,padding,border和 margin 指示属性将在网页上占据多少空间。
CSS 框模型包含CSS中的不同属性。这些在下面列出。
现在,无涯教程将详细确定属性。
Border 字段
它是填充框和边距之间的区域。它的比例取决于边界的宽度和高度。
Margin 字段
该线段由边界和边界边缘之间的区域组成。边距区域的比例等于边距框的宽度和高度。
Padding 字段
该字段需要填充组件,本质上,此区域是主题区域周围和边框内的空间。填充框的高度和宽度决定其比例。
Content 字段
此区域中包含诸如文本,照片或其他数字媒体之类的材料。
通常,当您使用CSS宽度和高度资源分配属性的宽度和高度时,这意味着您只是放置了该组件的主题区域的高度和宽度。
元素框可以在网页上占据的特定区域的度量如下:
Box Size | CSS属性 |
---|---|
Height | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
Width | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
在这里,为了解释CSS盒模型,无涯教程有一个实例。
<!DOCTYPE html> <head> <title>CSS Box Model</title> <style> .main { font-size:30px; font-weight:bold; Text-align:center; } .gfg { margin-left:50px; border:50px solid Purple; width:300px; height:200px; text-align:center; padding:50px; } .gfg1 { font-size:40px; font-weight:bold; color:black; margin-top:60px; background-color:purple; } .gfg2 { font-size:20px; font-weight:bold; background-color:white; } </style> </head> <body> <div class = "main">CSS Box-Model Property</div> <div class = "gfg"> <div class = "gfg1">Learnfk</div> <div class = "gfg2">A best portal for learn Technologies</div> </div> </body> </html>
编译完上面的代码后,您将获得以下输出。
在这里,还有一个插图来描述CSS盒子模型。
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-box-model.html
来源:LearnFk无涯教程网
<!DOCTYPE html> <head> <style> .main { font-size:30px; font-weight:bold; text-align:left; } #box { padding-top:30px; width: 300px; height: 100px; border: 40px solid red; margin: 30px; text-align:center; font-size:32px; font-weight:bold; } </style> </head> <body> <div class="main">CSS Box-Model Property</div> <div id="box">Learnfk</div> </body> </html>
执行完代码后,您将获得以下输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)