CSS盒子模型

最新推荐文章于 2025-04-26 22:31:10 发布

倒霉男孩

最新推荐文章于 2025-04-26 22:31:10 发布

阅读量347

点赞数 15

分类专栏： html+css学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/2401_86523075/article/details/147448787

版权

html+css学习笔记专栏收录该内容

42 篇文章

订阅专栏

CSS盒子模型

CSS盒子模型是指在网页中每个元素都被看做是一个矩形的盒子，由内容区域、内边距、边框和外边距组成。是网页布局的基础，每个元素都被视为一个矩形盒子。

CSS盒子模型由以下几个部分组成：
1.内容区域（Content）：盒子中用来显示文本和图像内容的区域，尺寸由width和height控制。
2.内边距（Padding）：内容与边框之间的透明区域，通过padding设置。
3.边框（Border）：围绕内容和内边距的边界线，通过border设置。
4.外边距（Margin）：盒子与其他元素之间的透明间距，通过margin设置。

这些部分组合在一起形成了完整的盒子模型，影响元素的尺寸、位置和相互之间的布局。以下是一个示例，演示CSS盒子模型的应用：

<!DOCTYPE html>
<html>
<head>
    <title>CSS盒子模型示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
            background-color:lightgray;
        }
    </style>
</head>
<body>
    <div class="box">这是一个盒子</div>
</body>
</html>

这段代码定义了一个.box 类，应用于一个<div> 元素。.box 类设置了盒子的尺寸、内边距、边框和外边距。

width:定义内容区（Content）的宽度为 200 像素。
height:：定义内容区（Content）的高度为 100 像素。
padding：设置内边距，即内容区与边框之间的透明间距。
border: 设置边框，包含宽度、样式、颜色。
margin:设置外边距，即元素与其他元素之间的透明间距。
background-color: 设置背景颜色为浅灰色。