盒子模型html简要介绍,CSS盒子模型基本介绍和用法

CSS盒子模型是一个包含多个属性的容器, 其中包括边框, 边距, 填充和内容本身。它用于创建网页的设计和布局。它可以用作自定义不同元素布局的工具包。 Web浏览器根据CSS框模型将每个元素呈现为矩形框。

Box-Model在CSS中具有多个属性。其中一些如下：边界

边距

填充

内容

下图说明了盒子模型。

边区：它是框的边距和边距之间的区域。其尺寸由边框的宽度和高度给出。

保证金区域：该区域由边界和边距之间的空间组成。边距区域的尺寸是边距框宽度和边距框高度。将元素与其相邻元素分开是很有用的。

填充区域：它包括元素的填充。该区域实际上是内容区域周围和边框内的空间。其尺寸由填充盒的宽度和填充盒的高度给出。

内容范围：该区域包含诸如文本, 图像或其他媒体内容之类的内容。它受内容边缘的限制, 其尺寸由内容框的宽度和高度确定。

范例1：

CSS Box Model

.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;

}

CSS Box-Model Property

lsbin

A computer science portal for geeks