深入理解 `box-sizing: border-box；`：CSS 布局的利器

最新推荐文章于 2025-06-06 17:08:38 发布

engchina

最新推荐文章于 2025-06-06 17:08:38 发布

阅读量1.4k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： LINUX 文章标签： css css3 前端

本文链接：https://blog.csdn.net/engchina/article/details/145420313

深入理解 `box-sizing: border-box;`：CSS 布局的利器

在 CSS 中，box-sizing 属性决定了元素的总宽度和高度是如何计算的。默认情况下，元素的宽度和高度只包括内容（content），不包括内边距（padding）和边框（border）。然而，box-sizing: border-box; 可以改变这种行为，使元素的宽度和高度包括内容、内边距和边框。本文将详细介绍 box-sizing: border-box; 的用法及其在实际开发中的应用。

默认行为

在默认情况下，元素的宽度和高度只包括内容部分。内边距和边框会增加元素的总尺寸。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Box Sizing</title>
    <style>
        .default-box {
     
     
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #0078d7;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <div class="default-box">Default Box Sizing</div>
</body>
</html>

在这个示例中，.default-box 的总宽度是 200px（内容宽度） + 2 * 20px（内边距） + 2 * 5px（边框） = 250px。

使用 `box-sizing: border-box;`

当你将 box-sizing 设置为 border-box 时，元素的宽度和高度将包括内容、内边距和边框。这意味着你设置的宽度和高度将是元素的总尺寸。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=

最低0.47元/天解锁文章

200万优质内容无限畅学

深入理解 `box-sizing: border-box；`：CSS 布局的利器

深入理解 `box-sizing: border-box;`：CSS 布局的利器

默认行为

示例代码

使用 box-sizing: border-box;

示例代码

使用 `box-sizing: border-box;`