CSS3 box-sizing 属性的使用

作者: 酱爆小咸鱼 | 来源:发表于2018-07-20 17:07 被阅读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>