>[success] # 設置寬高 * **min-width：最小寬度**，無論內容多少，寬度都大于或等于min-width * **max-width：最大寬度**，無論內容多少，寬度都小于或等于max-width * **min-height：最小高度**，無論內容多少，高度都大于或等于min-height * **max-height：最大高度**，無論內容多少，高度都小于或等于max-height >[danger] ##### 寬度設置的只是盒子模型中內容寬度 * **盒子模型**分是個部分組成**外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）**，但設置寬度時候實際影響是**內容寬度**，一下為例實際盒子的寬度為`210`并不是`200` ~~~html <div style="width: 200px; border: 5px solid">123</div> ~~~  >[success] # 盒子模型 1. 標準盒模型設置：內容區域的寬，因此實際盒子的實際計算方式**寬度 = border + padding + width**，元素的實際占用**高度 = border + padding + height** 2. IE盒子模型（IE8以下瀏覽器）整個盒子所占有的寬度。因此設置多寬盒子即多寬 >[danger] ##### 實際開發 1. 實際開發過程IE 盒子模型比較合理，為了讓非IE8 以下的瀏覽器達到IE 的效果設置**box-sizing用來設置盒子模型中寬高的行為** 1.1. `box-sizing:content-box` 即內容為設置計算也就是標準盒子計算模式padding、border都布置在width、height外邊 1.2. `box-sizing:border-box` 即 IE盒子計算模式 padding、border都布置在width、height里邊