Skip to main content

CSS盒模型

可以在网页上描述的组件由一个或多个矩形框组成。

CSS框模型是一个包含大量资源的隔间,例如边缘、边框、填充和材质。它用于开发网页的设计和结构。它可以作为一套工具来个性化不同组件的布局。根据CSS框模型,web浏览器将每个元素作为一个方形棱镜提供。

下图说明了宽度、高度、填充、边框和边距等CSS属性如何决定属性在网页上所占的空间。

CSS盒模型

CSS框模型包含CSS中的不同属性。下面列出了这些。

translate failed

  • 边境
  • 边缘
  • 衬料
  • 所容纳之物 现在,我们将逐一详细地确定属性。

边界场

它是填充框和边距之间的区域。其比例由边界的宽度和高度决定。

边距字段

该段由边界和边界边缘之间的区域组成。

边距区域的比例等于边距框的宽度和高度。最好将产品与其相邻节点分开。

填充字段

此字段需要填充组件。本质上,这个区域是主题区域周围和边框框内的空间。填充框的高度和宽度决定其比例。

translate failed

内容字段

该区域包含文本、照片或其他数字媒体等材料。

它受信息边缘的约束,其比例由内容外壳的宽度和高度决定。

宽度和高度的元素

通常,当您使用CSS宽度和高度资源指定属性的宽度和高度时,这意味着您只需定位该组件主题区域的高度和宽度。单元框的附加高度和宽度基于一系列影响。

元素框在网页上可能占据的特定区域测量如下-

translate failed

盒子的大小CSS的性质
身高高度+填充顶部+填充底部+边框顶部+边框底部+边距顶部+边距底部
宽度宽度+左边填充+右边填充+左边边框+右边边框+左边空白+右边空白

例1

在这里,为了解释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">JavaTpoint</div>
<div class = "gfg2">A best portal for learn Technologies</div>
</div>
</body>
</html>

输出

编译上述代码后,您将获得以下输出。

translate failed

CSS盒模型

例2

这里,我们还有一个例子来描述CSS框模型。

<!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">JavaTpoint</div>
</body>
</html>

输出

执行代码后,您将获得以下输出:

CSS盒模型

要点:在CSS框模型中,实体框的主题区域是内容(如图像、文本、视频等)最初出现的区域。它还可能保留已故元素的盒子。