Style boxSizing 属性 详解
css3基础 2023-07-30 01:55:08小码哥的IT人生shichen
Style boxSizing 属性
定义和用法
boxSizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
另请参阅：
CSS 参考手册：box-sizing 属性
实例
更改 boxSizing 属性：
document.getElementById("myDIV").style.boxSizing = "border-box";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 300px;
border: 1px solid;
}
div.box {
width: 150px;
border: 3px solid coral;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">这是 BOX1。</div>
<div class="box" id="box2">这是 BOX2。</div>
<div style="clear:both;"></div>
</div>
<p>一个 300 像素的容器内有两个 150 像素的框。这应该很合适，但由于边框和内边距，两个框各自占用的空间超过 150 像素。这个“问题”可以通过将 boxSizing 属性设置为 “border-box” 来解决。</p>
<p>点击“试一试”按钮，将两个框的 boxSizing 属性设置为 “border-box”：</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("box1").style.MozBoxSizing = "border-box"; /* 针对老版本 Firefox 的代码 */
document.getElementById("box2").style.MozBoxSizing = "border-box"; /* 针对老版本 Firefox 的代码 */
document.getElementById("box1").style.boxSizing = "border-box";
document.getElementById("box2").style.boxSizing = "border-box";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 boxSizing 属性：
object.style.boxSizing
设置 boxSizing 属性：
object.style.boxSizing = "content-box|border-box|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| content-box |
默认值。这是 CSS2.1 规定的宽度和高度的行为。 规定的宽度和高度（以及 min/max 属性）分别应用于元素内容框的宽度和高度。 元素的内边距和边框在规定的宽度和高度之外进行布局和绘制 |
| border-box |
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | content-box |
|---|---|
| 返回值： | 字符串，表示元素的 box-sizing 属性。 |
| CSS 版本： | CSS3 |
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
