深入理解 `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>
總結
box-sizing: border-box; 是一個非常有用的 CSS 屬性，可以幫助你更容易地控制元素的總尺寸。通過將 box-sizing 設置為 border-box，你可以確保元素的寬度和高度包括內容、內邊距和邊框，從而簡化布局和樣式設計。
：Bean定義接口體系)
