【CSS】：盒模型

Yui_

发布于 2025-02-04 09:48:36

6900

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

1. 什么是盒模型

在 CSS 中，盒模型（Box Model） 是网页布局的基础。所有 HTML 元素在浏览器中都会被当作一个矩形“盒子”来处理，而 盒模型决定了这些“盒子”的尺寸、间距和显示方式。盒模型的组成：

Content（内容区）：盒子内部的实际内容，如文本、图片等。
Padding（内边距）：内容与边框之间的距离，增加 padding 会增大盒子的可见区域。
Border（边框）：围绕内容和内边距的边界，可以设置颜色、粗细和样式。
Margin（外边距）：盒子与其他盒子之间的距离，不会影响盒子自身的大小。打开网页的开发者模式，你会看到这样一个矩形：

可以用下图理解盒模型的层级关系：

+------------------------+  <-- margin (外边距)
|                        |
|  +------------------+  |  <-- border (边框)
|  |  +------------+  |  |  <-- padding (内边距)
|  |  |  内容区    |  |  |
|  |  +------------+  |  |
|  +------------------+  |
|                        |
+------------------------+

1.1 边框

基础属性：

粗细：border-width。
样式：border-style，默认没有边框，solid实线边框，dashed虚线边框，dotted点线边框。
颜色：border-color。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 250px;
            border-width: 10px;
            border-style:solid;
            border-color:green;
        }
    </style>
</head>
<body>
    <div>
        测试~
    </div>
</body>
</html>

可以看到图中我们有了一个厚度达10px的边框，同时因为这个边框导致了我们盒子被撑大了，原本盒子：500*250变成了520*270。添加了边框的厚度。如果你想要操作每一个边框，可以使用以下语法：

border-top/bottom/left/right

来分别控制每个方向的边框。提问：有没有办法不撑大盒子？有的，

* {
	box-sizing: border-box;
}

加上这一段代码即可。

1.2 内边距

padding设置内容盒边框的距离。基础写法：默认内容是顶着边框放置的，用padding来控制距离。同样的，可以控制4个方向：

padding-top。
padding-bottom。
padding-left。
padding-right。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div>
        测试！
    </div>
</body>
</html>

没加padding

加上padding后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 300px;
            padding-top:5px;
            padding-left:10px;
        }
    </style>
</head>
<body>
    <div>
        测试喵~
    </div>
</body>
</html>

通过图片，我们看到了一个绿色的内边框。注意：内边距同样会撑大盒子，解决方法同边框一样。

1.3 外边距

基础写法：控制盒子与盒子之间的距离：同样可以控制四个方向：

margin-top.
margin-bottom.
margin-left.
margin-right.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin-left:20px;
        }
    </style>
</head>
<body>
    <div>
        现在是北京时间22点33分~
    </div>
</body>
</html>

通过观察图片我们可以看到，外边框是不占盒子大小了

1.4 复合写法

现在我会让盒子的各个方向的部分都进行不同的处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-left: 10px solid red;
            padding-right: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>who are you?</p>
    </div>
</body>
</html>