CSS-标准盒模型和IE6混杂模式

1. w3c标准盒模型

• 以宽度举例（高度是同理的）

boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边（padding * 2）
boxContentWidth ( 盒子内容区宽 ) = boxWidth

2. IE6混杂模式 （怪异模式）

box-sizing: border-box 触发ie6混杂模型 （默认值是 content-box）

boxWidth = 设置的宽( width )
boxContentWidth （盒子内容区宽） = boxWidth - border * 2 - padding * 2

3. overflow

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

scroll ; 可以用作 横向滚动和垂直滚动 条目的功能实现

• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

3. resize

属性规定是否可由用户调整元素的尺寸,( 需要配合 overflow 属性使用);
需要慎用；因为会影响页面结构，而且不断的调整宽高会重排重绘，造成性能消耗

• both 用户可调整元素的高度和宽度。
• horizontal 用户可调整元素的宽度。
• vertical 用户可调整元素的高度。