CSS Box Sizing 详解
CSS Box Sizing
CSS Box Sizing
CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。
假如不指定 CSS box-sizing 属性
默认情况下，元素的宽度和高度是这样计算的：
- width + padding + border = 元素的实际宽度
- height + padding + border = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。
下图展示了两个有相同指定宽度和高度的 <div> 元素：
（宽度为 300px，高度为 100px）。
（宽度也为 300px，高度为 100px）。
上面的两个 <div> 元素在最终结果中呈现出不同的尺寸（因为 div2 指定了内边距）：
示例代码：
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个 div 更小（宽度为 300 像素，高度为 100 像素）。</div>
<br>
<div class="div2">这个 div 更大（宽度也是 300 像素，高度也是 100 像素）。</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
box-sizing 属性解决了这个问题。
如果使用 CSS box-sizing 属性
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。
如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框：
该例与上例相同，两个 <div> 元素都设置了 box-sizing: border-box;：
示例代码：
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">现在，两个 div 的尺寸是一样的！</div>
<br>
<div class="div2">Hello！</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。
下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。
将其应用于所有元素是安全且明智的：
示例代码：
* {
box-sizing: border-box;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="/demo/demo_form.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS Box Sizing 属性
| 属性 | 描述 |
|---|---|
| box-sizing | 定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。 |
