box-sizing: content-box | border-box | inherit ;
1.标准盒子模型 : padding 、 margin 、 border 都会把width撑大
2.IE盒子模型 : width固定,padding..只会把正文宽度缩小
值 | 描述 |
---|---|
content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
box-sizing: content-box
就是W3C的标准盒模型的计算方式,而box-sizing: border-box
就是IE盒模型的计算方式。
链接:https://www.jianshu.com/p/51e5bb7e9fa2
继承宽高问题:
子元素的宽高通过百分比,只继承父元素的内容区域 content,父元素的border、padding不予考虑 |
不同的是:
content-box: 子盒子的padding、border不参与其中,也就是父盒子宽度为100px,子盒子50% -> 子盒子正文50px;
border-box: 子盒子的padding、border参与其中,也就是父盒子宽度为100px,子盒子50% -> 子盒子正文+padding+border = 50px ;
padding继承问题:
参考文章:http://www.divcss5.com/rumen/r50134.shtml
个人意见 : 实际上就是padding撑高度