HTML 盒子模型是指 HTML 元素在网页中呈现为一个矩形区域，该区域由四个部分组成：内容区域、内边距、边框和外边距。这四个部分合在一起就构成了 HTML 盒子模型。 下面是一个示例代码，演示了如何使用 CSS 定义盒子模型的属性
<div class="box"> <p>这是一个盒子</p> </div>
.box {
width: 200px; /* 盒子的宽度 */
height: 100px; /* 盒子的高度 */
padding: 10px; /* 盒子的内边距 */
border: 1px solid #ccc; /* 盒子的边框 */
margin: 20px; /* 盒子的外边距 */
}
以上代码将创建一个宽为 200 像素、高为 100 像素的盒子，该盒子具有 10 像素的内边距、1 像素宽的灰色边框和 20 像素的外边距。在该盒子中还包含了一个段落元素，该元素属于盒子的内容区域。 可以通过修改 width、height、padding、border 和 margin 属性来改变盒子模型的属性。注意，padding 和 border 属性都有多个值可以设置，以便分别设置上、下、左、右四个方向的值。
评论