框模型css

box-sizing属性

• box-sizing: content-box;

  • 默认值，【标准盒模型】

  • 在width和height属性之外绘制元素的内填充和边框

• box-sizing: border-box;

  • 【怪异盒模型】

  • 通过已有的设置好的width属性和height属性中分别减去内填充和边框宽度，得到内容宽和高

           利用padding：；

   两种盒模型的区别

• W3C标准盒子模型(content-box)：内容就是盒子的边界。
• W3C标准盒子模型(content-box)： width=内容宽度
• IE盒子模型(border-box)：边框才是盒子的边界。
• IE盒子模型(border-box)： width=内容宽度+padding+border

                                                                                                      @南乔笔记