盒子模型box-sizing中content-box和border-box的理解
什么是盒子模型box-sizingbox-sizing的三个属性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的三个属性
border-box理解
-webkit-box-sizing: border-box; 则div 设置的宽高将包含 边框及 padding<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>box-sizing</title><style type="text/css">.testdiv{padding: 10px;;width:100px;border: 10px solid}</style></head><body ><div class="testdiv" > 普通</div><div class="testdiv" style=" -webkit-box-sizing: border-box;">特殊</div></body></html>
效果如图：
第一个div的框架如下
第二个div的框架如下
