CSS3 box-sizing 属性的使用
2018-07-20 本文已影响4人
酱爆小咸鱼
之前一直没有明白box-sizing这个属性如何使用，今天终于弄明白了，顺便记录一下。
平时我们写盒子模型的时候box-sizing的属性默认是content-box的。也就是说一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width），
如果把元素的box-sizing属性设置为border-box之后，整个元素会实际所占宽高度等于你所设置元素的宽高。就算你添加了其他边距，实际的大小还是不会变。
//css
<style>
.content-box{
width: 100px;
height: 100px;
border: 1px solid;
padding: 0px 10px;
box-sizing: content-box;
}
.border-box{
box-sizing: border-box;
}
</style>
<html>
<div class="content-box">content-box</div>
<div class="content-box border-box">border-box</div>
</html>
