css（平时记录的）
程序员文章站
2022-05-10 19:37:51
...
box-sizing 属性
box-sizing: content-box | padding-box | border-box | inherit;
content-box：盒中包含内容（默认）
padding-box: 盒中包含内容、内边距padding
border-box： 盒中包含内容、内边距padding、border
均以width，height控制盒的大小
兼容性：
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
-webkit-box-sizing:100px; //for ios-safari, android
-moz-box-sizing:100px; // Firefox
box-sizing:100px; // other实验代码(未成功)：
<!DOCTYPE html>
<html>
<head>
<style>
div#1{
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */
}
div#2{
box-sizing:padding-box;
}
div#3{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
div.box{
border:5px solid red;
width:100px;
height:100px;
background:yellow;
padding:10px
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="1">这个 div 占据左半部分。</div>
<div class="box" id="2">这个 div 占据左半部分。</div>
<div class="box" id="3">这个 div 占据右半部分。</div>
</div>
<script>
var contentBox=document.getElementById("1");
var paddingBox=document.getElementById("2");
var borderBox=document.getElementById("3");
alert(contentBox.offsetWidth); --弹出150px
alert(paddingBox.offsetWidth); --弹出110px
alert(borderBox.offsetWidth); --弹出100px
</script>
</body>
</html>