当前位置：首页 > article >正文

CSS的盒子模型（Box Model)

article 2025/1/11 18:43:12

所有HTML元素都可以看作盒子，在CSS中盒子模型是用来设计和布局的，CSS盒子模型本质上是一个盒子，分装周围的HTML元素包括：外边距，边框，内边距和实际内容。

Margin（外边距）

清除边框外的区域，外边距是透明的。

Border（边框）

围绕在内边距和内容外的边框。

Padding（内边距）

清楚内容周围的区域。

Content（内容）

盒子的内容，显示文本图像。

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于实物部分，内边距等同于盒子中的泡沫，边框等同于快递盒子，外边距等同于快递与快递之间的距离。

例：

首先添加内容

<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;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

添加内边距

<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;
            background-color: red;
            padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

注：可以通过使用padding-left/right/top/bottom来实现单个边距的添加。

添加边框

<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;
            background-color: red;
            padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/
            border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>

添加外边距

<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;
            background-color: red;
            padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/
            border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/
            margin: 100px 100px;/*第一个值表示上下外边距的大小，第二个值表示左右边距的大小*/ 
        }
    </style>
</head>
<body>
    <div class="continer"></div>
</body>