CSS的宽高、padding问题

 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撑高度