CSS 盒子模型详解

1加1等于

于 2025-07-03 11:04:06 发布

阅读量950

点赞数 50

CC 4.0 BY-SA版权

分类专栏： javascript实战文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45075226/article/details/149081678

javascript实战专栏收录该内容

46 篇文章

订阅专栏

本文将从多个方面详细介绍 CSS 盒子模型。

本文目录

一、基本概念

CSS 盒子模型由内容区（Content）、内边距（Padding）、边框（Border）和外边距（Margin）组成，每个元素在页面中都可以看作是一个盒子。这几个部分从内到外依次排列，共同决定了元素在页面中占据的空间大小。

二、盒子模型详解

内容区（Content）

内容区是盒子的核心部分，用于显示元素的实际内容，如文本、图像等。内容区的大小由 width 和 height 属性决定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .content-box {
            width: 200px; # 宽度为 200px
            height: 100px; # 高度为 100px
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="content-box">这是内容区</div>
</body>

</html>

内边距（Padding）

内边距是内容区与边框之间的距离，用于控制内容与边框之间的空白空间。可以使用 padding-top、padding-right、padding-bottom 和 padding-left 分别设置四个方向的内边距，也可以使用 padding 简写属性一次性设置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .padding-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="padding-box">这是设置了内边距的盒子</div>
</body>

</html>

边框（Border）

边框围绕在内边距之外，用于包裹内容区和内边距。可以使用 border-width、border-style 和 border-color 分别设置边框的宽度、样式和颜色，也可以使用 border 简写属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .border-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="border-box">这是设置了边框的盒子</div>
</body>

</html>

外边距（Margin）

外边距是盒子与其他元素之间的距离，用于控制元素与元素之间的空白空间。可以使用 margin-top、margin-right、margin-bottom 和 margin-left 分别设置四个方向的外边距，也可以使用 margin 简写属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .margin-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid blue;
            margin: 30px;
        }
    </style>
</head>

<body>
    <div class="margin-box">这是设置了外边距的盒子</div>
</body>

</html>

三、盒子宽度和高度的计算

标准盒模型

在标准盒模型中，元素的总宽度和总高度计算方式如下：

总宽度：width + padding-left + padding-right + border-left-width + border-right-width
总高度：height + padding-top + padding-bottom + border-top-width + border-bottom-width

怪异盒模型（IE 盒模型）

怪异盒模型中，width 和 height 属性包含了内容区、内边距和边框的大小，不包含外边距。其计算方式如下：

总宽度：width（包含 padding 和 border）+ margin-left + margin-right
总高度：height（包含 padding 和 border）+ margin-top + margin-bottom

可以通过 box-sizing 属性来切换盒模型，box-sizing: content-box; 为标准盒模型（默认值），box-sizing: border-box; 为怪异盒模型。

四、两种盒模型对比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .standard-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid green;
            box-sizing: content-box;
        }

        .border-box-model {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid orange;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="standard-box">标准盒模型</div>
    <div class="border-box-model">怪异盒模型</div>
</body>

</html>

标准盒模型的 .standard-box 实际占据的宽度为 200 + 20×2 + 5×2 = 250px，高度为 100 + 20×2 + 5×2 = 150px；而怪异盒模型的 .border-box-model 宽度和高度就是设置的 200px 和 100px，内边距和边框会包含在这个范围内。

← 上一篇 AngularJS知识快速入门（上）

记得点赞、关注、收藏哦！

下一篇 Ajax——在OA系统提升性能的局部刷新 →