box-sizing是一个CSS3属性,与盒子模型有着密切联系。即决定元素的宽高如何计算,box-sizing有三个属性:
box-sizing: content-box|border-box|inherit:
复制代码
content-box 使得元素的宽高即为内容区的宽高
<style>
* {
padding:0;
margin:0
}
#app{
height: 100px;
width: 200px;
background: green;
margin:10px;
padding:5px;
box-sizing: content-box
border:2px solid red;
}
.box{
display: inline-block;
border:1px solid red;
width:50%
}
</style>
<body>
<div id="app">
<span class="box">左</span>
<span class="box">右</span>
</div>
</body>
复制代码
border-box 与上面相反,如果你需要在一个宽200px的div上围绕2px的边框,那么你的边框是在这个div容器内壁围绕,即content+padding+border=200px
inherit 指定box-sizing属性的值,应该从父元素继承