css（平时记录的）

最新推荐文章于 2025-08-22 15:07:29 发布

原创最新推荐文章于 2025-08-22 15:07:29 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

4 篇文章

订阅专栏

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>