盒子模型box-sizing中content-box和border-box的理解

什么是盒子模型

就比如说页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子，这些元素都符合盒子模型的定义。

box-sizing

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型

W3C标准盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）

IE传统下盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

box-sizing的三个属性

content-box	默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
bordr-box	重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
inhert	使元素继承父元素的盒模型模式

border-box理解

 -webkit-box-sizing: border-box;  则div 设置的宽高将包含 边框及 padding




"Content-Type" content="text/html; charset=utf-8" />


    
    


"testdiv"  > 普通
"testdiv"  style="  -webkit-box-sizing: border-box;">
    特殊

效果如图：

第一个div的框架如下

第二个div的框架如下