css、自动适配box-sizing属性
2016-12-29 本文已影响107人
zoomsk
神奇的box_sizing
box-sizing 的CSS属性是为了解决传统的盒子模型不直接而产生的。
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
可选值
box-sizing: inherit;
box-sizing: content-box; //默认，padding内
box-sizing: border-box; //border及其内部空间
例子、没有box-sizing的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> box-size</title>
<style>
.container {
width: 50%;
border: 1px solid #f00;
}
.box{
width: 100%;
height: 200px;
padding: 50px;
border: 10px solid #1c94c4;
background: rgba(14,132,52,0.5);
}
.box1{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="box"> box</div>
<div class="box box1"> box1 </div>
</div>
</body>
</html>
效果图：
box_sizing.png
如图所示，padding和border会把.box撑开，达到不到想要的效果，这是就可以使用box-sizing属性了，如下,只需为box加上box-sizing: border-box就行了，当然margin问题还是存在的，border-box意味着只会压缩border及其以内的内容，外部就管不到了。
