box-sizing
页面渲染时,dom 元素所采用的 布局模型。可通过box-sizing
进行设置。根据计算宽高的区域可分为:
- border-box
- content-box(W3C标准盒模型)
- inherit
border-box:给盒子的宽高包括padding、border及内容的高度,也就说你给盒子设置width:100px;padding: 10px; border: 10px solid; 那么内容的宽度就只有100-10-10=80px; 给的padding 跟border越大 内容的宽度越小 也就是不管padding border 的值怎么变 这三项加起来就是你的设定值就对了。
content-box:设置了此属性,那么你如果给盒子设置width = 100px,那么盒子的内容就为100px; 不会因为padding值或者border值变化而变化。
inherit: 规定应从父元素继承 box-sizing 属性的值。