border-box

Posted 2023-05-01

参考技术A box-sizing: border-box叫做标准盒子模型

border-box意味着子容器的padding和border的厚度都算在50%之内

这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆

border-box兼容性非常好，可支持IE8及以上浏览器

现在最著名的CSS框架几乎都采用了border-box

但假如在全局上加上border-box，是没必要加的

事实上：你只需要在必须使用border-box的元素身上使用border-box，其他所有元素都保持content-box就好了

为什么？

因为：box-sizing属性本来就应该是灵活使用的，全局设定为border-box或者全局设定为content-box都有弊端

【使用场合】

子元素有padding和border，或者至少有其一

并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box

css BORDER-box.css

/*
   Box-sizing: Border-box
   http://www.paulirish.com/2012/box-sizing-border-box-ftw/
   http://css-tricks.com/box-sizing/
*/

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}