两种box model
分类：CSS
box model是指元素计算尺寸的模型，具体的说就是height、padding、border、margin与元素实际尺寸的计算关系，如题所述有两种box model：
1.w3c的标准box model： 元素的实际空间=height/width+padding+border+margin
2.ie 的传统box model：元素的实际空间=height/width+margin,（height/width包含border，padding box）
目前浏览器，大部分元素都是基于w3c model的，但对于表单元素有些是基于传统 box model的，包括：input[type='submit'],input[type="reset"],button和 select，这就意味着我们只需设置最终的高宽，里面的padding，border只会向内延伸。
另外，css3引进的新属性 box-sizing可以改变box model，这是非常有用的，如我们需要设置div高度为屏幕100%，但又想设置其padding为一个绝对值，传统做法就是里面再嵌套一个div来设置padding，这时使用box-sizing：border-box，使用传统box model渲染就很容易解决了。
目前兼容写法：
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */
Both element have these styles …width 250px .height 100px .border 5px solid 6374AB .padding 10px …The first uses the traditional box model while the second uses the W3C one….. No one will think of measuring the content of the box..Web designers who create boxes for holding content care about the visible width of the box about the distance from border to border.
No one will think of measuring the content of the box…Web designers who create boxes for holding content care about the visible width of the box about the distance from border to border. The borders and not the content are the visual cues for the user of the site.
yes that’s true,but if as a f2er, you must know the rule
specify the CSS box model that s used to calculate the widths and heights.