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

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

article 2025/2/4 18:34:24

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

- 默认行为
- - 示例代码
- 使用 `box-sizing: border-box;`
- - 示例代码
- 全局应用 `box-sizing: border-box;`
- - 示例代码
- 实际应用场景
- - 1. 表单布局
  - 2. 网格布局
- 总结

在 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="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Box Sizing</title>
    <style>
        .border-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #0078d7;
            background-color: #f3f3f3;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="border-box">Border Box Sizing</div>
</body>
</html>

在这个示例中，.border-box 的总宽度是 200px（内容宽度 + 内边距 + 边框），而不是 250px。这意味着你设置的宽度和高度将是元素的总尺寸。

全局应用 `box-sizing: border-box;`

为了确保所有元素都使用 border-box 尺寸计算，你可以在全局样式中设置 box-sizing。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Border Box Sizing</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .global-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #0078d7;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <div class="global-box">Global Border Box Sizing</div>
</body>
</html>

在这个示例中，所有元素都使用 border-box 尺寸计算，包括 .global-box。这样可以确保所有元素的宽度和高度都包括内容、内边距和边框。

实际应用场景

1. 表单布局

在表单布局中，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>Form Layout</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
</body>
</html>

2. 网格布局

在使用 CSS 网格布局时，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>Grid Layout</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .grid-item {
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>
</html>