>[danger] margin 不管是 content-box还是border-box都不会影响css定义的width和height ## **box-sizing: content-box|border-box|inherit:** 定义width为40px，那么去掉border和padding占用设置元素额外的宽高，使浏览器显示的元素宽高+border+padding的总和与设置with、height的一致，它在浏览器的总宽 =（40px-border-padding） c传统的css盒子：`padding` + `border` + `width`= 盒子的宽度（例默认时： 设置某个div宽为40px 那么他在浏览器的总宽=40px+border+padding） ~~~ width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 height(高度) + padding(内边距) + border(边框) = 元素实际高度 ~~~ ``` width:100px; border:10px solid red; padding:10px; //默认content-box时实际内容宽度： 100px(width)+2*10px*(padding)+2*10px(border)=140px border-box时实际内容宽度： 100px-2*10px-2*10px =60px; ``` | **属性值** | **说明** | | --- | --- | | content-box | 默认值，border 和 padding 设置后用于元素的总长度。 | | border-box | border 和 padding 设置后不用于元素的总长度。 | box-sizing 是 CSS3 推出的，各个厂商在实现时设置了私有前缀。 | | Opera | Firefox | Chrome | Safari | IE | | --- | --- | --- | --- | --- | --- | | 支持需带前缀 | 无 | 2 ~ 28 | 4 ~ 9 | 3.1 ~ 5 | 8.0+ | | 支持不带前缀 | 10.1+ | 29+ | 10+ | 6+ | 9.0+ | //完整形式 ~~~css -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; ~~~ 示例：两边固定120px宽度中间比例缩放  第二种方法：  ## **resize:none|both|horizontal|vertical** CSS3 提供了一个 resize 属性，来更改元素尺寸大小。 一般普通元素，默认值是不允许的(除了表单元素textarea )。需要设置 overflow:auto，配合 resize:both 才会出现类似extarea可拖拽改变元素大小 | 属性 | 说明 | | --- | --- | | none | 默认值，不允许用户调整元素大小。 | | both | 用户可以调节元素的宽度和高度。 | | horizontal | 用户可以调节元素的宽度。 | | vertical | 用户可以调节元素的高度。 | //允许修改 ~~~css aside { resize: both; overflow: auto; } ~~~