box-sizing属性中的border-box学习分享

Posted 2020-12-10 david2009

box-sizing是css3新增的一个属性

其值有两个,分别是border-box和content-box

当我们给一个容器设置box-sizing为border-box时,就会出现一个很奇妙的现象

div {
    width: 300px;
    height: 100%;
    padding: 20px;
    margin: 20px;
    border: 10px solid teal;
}

大家来算算此时div容器本身的宽度是多少呢?

相信你已经算出来了, 此时div容器的宽度由 (content:) 300px + (padding-left + padding - right) + 20 * 2 + 10 * 2 (border-left + border-right) = 360px

那么当我们给box-sizing设置border-box又会发生什么呢?

div {
   box-sizing: border-box;
 }

此时计算方式发生了很大的改变, 当前div容器的宽度变为300px, 无论你如何设置padding或者border(前提设置的padding或者border值小于width的值),容器本身永远是300px;

300px - (border-left + border -right)  - (padding-left + padding-right) = 240px, 其中 240px是减去border和padding后剩余的宽度留作content区域使用,  

这种计算方式想必你想起来了,这不就是老IE版本盒子模型的计算方式吗???

对,还真没错, 老IE的盒子模型就是采用这种策略,当我们给一个容器定一个宽高,那么它就会一直都是给定的宽高的值,无论如何增加padding和border,仍然岿然不动,哈哈哈.这有个专业属于就是叫"混杂模式

 所以当我们开启了box-sizing: border-box的属性就相当于启用了IE混杂模式的行为