这章讲的没有突出重点！ box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
如果你创造了一个 <div> 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为：
100px(width)+2*10px*(padding)+2*10px(border)=140px
所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。
注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的 <div> 容器时，那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。
所以要合理利用好这个属性，这个属性十分重要。
帝企鹅
che***2890@gmail.com
Kai
790***286@qq.com
content-box 和 border-box 描述的太抽象了，这样更不好理解。
直观通俗的解释是：
content-box：指定盒模型为 W3C 标准模型，设置 border、padding 会增加元素 width与 height 的尺寸，即 border 与 padding 相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。
border-box：指定盒模型为 IE模型（怪异模式），设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。即空间还是这个空间，只是将部分空余的地方，转变成了其他空间用法而已，为内部转变。
设置border与padding与被影响属性值的关系公式： W3C标准盒模型（conten-box值）【width/height被改变，扩展】 width = content + border + padding; // 其中，width 为浏览器视窗呈现尺寸，content 为在CSS中设置的元素的 width; IE怪异盒模型（border-box值）【content被改变，压缩】 content = width - border - padding; // 其中，width 为在CSS中设置的元素的width; 具体可用浏览器调试看看，多观察观察就懂了。
总之：
1.W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；
2.IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】
另外的小技巧：【行高的计算】
/* 默认, W3C标准盒模型、 box-sizing: content-box */ <style type="text/css"> .box { width: 200px; height: 200px; text-align: center; border: 10px solid black; padding: 15px; } </style> /* 此时的行高：line-height = height = 200px;*/ /* 【因为行高即内容的高，而内容在这里即元素的高（边框和填充是扩展外部空间的）】 */ /* - - - - - - 分割线 - - - - - - */ /* IE怪异盒模型、box-sizing: border-box; */ <style type="text/css"> .box { width: 200px; height: 200px; text-align: center; border: 10px solid black; padding: 15px; box-sizing: border-box; } </style> /* 此时的行高：line-height = height - border*2 - padding*2 = 200px - 10px*2 - 15px*2 = 150px; */ /* 【因为此时，内容的其余空间被边框和填充占用，所以是元素的高减去边框和填充的空间，剩余即为内容空间】 */
这章讲的没有突出重点！ box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
如果你创造了一个 <div> 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为：
100px(width)+2*10px*(padding)+2*10px(border)=140px所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。
注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的 <div> 容器时，那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。
所以要合理利用好这个属性，这个属性十分重要。
帝企鹅
che***2890@gmail.com
Kai
790***286@qq.com
content-box 和 border-box 描述的太抽象了，这样更不好理解。
直观通俗的解释是：
content-box：指定盒模型为 W3C 标准模型，设置 border、padding 会增加元素 width与 height 的尺寸，即 border 与 padding 相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。
border-box：指定盒模型为 IE模型（怪异模式），设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。即空间还是这个空间，只是将部分空余的地方，转变成了其他空间用法而已，为内部转变。
设置border与padding与被影响属性值的关系公式： W3C标准盒模型（conten-box值）【width/height被改变，扩展】 width = content + border + padding; // 其中，width 为浏览器视窗呈现尺寸，content 为在CSS中设置的元素的 width; IE怪异盒模型（border-box值）【content被改变，压缩】 content = width - border - padding; // 其中，width 为在CSS中设置的元素的width; 具体可用浏览器调试看看，多观察观察就懂了。总之：
1.W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；
2.IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】
另外的小技巧：【行高的计算】
/* 默认, W3C标准盒模型、 box-sizing: content-box */ <style type="text/css"> .box { width: 200px; height: 200px; text-align: center; border: 10px solid black; padding: 15px; } </style> /* 此时的行高：line-height = height = 200px;*/ /* 【因为行高即内容的高，而内容在这里即元素的高（边框和填充是扩展外部空间的）】 */ /* - - - - - - 分割线 - - - - - - */ /* IE怪异盒模型、box-sizing: border-box; */ <style type="text/css"> .box { width: 200px; height: 200px; text-align: center; border: 10px solid black; padding: 15px; box-sizing: border-box; } </style> /* 此时的行高：line-height = height - border*2 - padding*2 = 200px - 10px*2 - 15px*2 = 150px; */ /* 【因为此时，内容的其余空间被边框和填充占用，所以是元素的高减去边框和填充的空间，剩余即为内容空间】 */
前端之HTML，CSS（十一）