>[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; } ~~~