**一．元素尺寸** 設置一個元素的尺寸大小。 |**屬性** |**值**|**說明**|**CSS 版本**| | --- | --- | --- | --- | | width | auto、長度值或百分比 | 設置元素的寬度 | 1 | | height | auto、長度值或百分比 | 設置元素的高度 | 1 | | min-width | auto、長度值或百分比 | 設置元素最小寬度 | 2 | | min-height | auto、長度值或百分比 | 設置元素最小高度 | 2 | | max-width | auto、長度值或百分比 | 設置元素最大寬度 | 2 | | max-height | auto、長度值或百分比 | 設置元素最大高度 | 2 | >[danger]《css權威指南指出》height width百分數是相對于包含塊『父block級別的』的?，如果沒有顯示聲明包含塊的width和height，當前子類的百分數高度會重置為auto (**牢記：就是要設置div100%顯示，必須設置其上一級div的寬度或高度，否則無效**。） 所有html，body，div都要設置height為100%。**雖然html默認的width和height一樣，但是由于body設置的是100%，如果沒有顯式設置html，body還是相當于沒設置。** height:100%和height:auto的區別 ~~~css height:100%;overflow:hidden; ，在有些瀏覽器出現莫名的奇妙的問題，但換成height:auto就好了 height:auto，是指根據塊內內容自動調節高度。 height:100%，是指其相對父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來定義高度。 ~~~ html和body的關系： html具有默認的元素是overflow:auto,這將導致在需要的時候會出現滾動條 bdoy:具有的默認元素：position:static;這意味著它的定位子元素相對于元素的坐標系定位 幾乎所有的瀏覽器，默認的偏移margin是在body元素上，而不是html的padding.（通過做實驗確實如此）有些還是body的padding，**所有重置頁邊距用body{margin:0;padding:0}缺一不可**。 **二．元素內邊距（填充）** CSS 盒模型中可以設置元素內部邊緣填充空白的大小，我們成為內邊距。樣式表如下： |**屬性**|**值**|**說明**|**CSS 版本**| | --- | --- | --- | --- | | padding-top | 長度值或百分比 | 設置頂部內邊距 | 1 | | padding-bottom | 長度值或百分比 | 設置底部內邊距 | 1 | | padding-left | 長度值或百分比 | 設置左邊內邊距 | 1 | | padding-right | 長度值或百分比 | 設置右邊內邊距 | 1 | | padding | 1 ~ 4 個長度值或百分比 | 簡寫屬性 | 1 | **三．元素外邊距** CSS 盒模型中可以設置元素外部邊緣填充空白的大小，我們成為外邊距。樣式表如下： |**屬性**|**值**|**說明**|**CSS 版本**| | --- | --- | --- | --- | | margin-top | 長度值或百分比 | 設置頂部內邊距 | 1 | | margin-bottom | 長度值或百分比 | 設置底部內邊距 | 1 | | margin-left | 長度值或百分比 | 設置左邊內邊距 | 1 | | margin-right | 長度值或百分比 | 設置右邊內邊距 | 1 | | margin | 1 ~ 4 長度值或百分比 | 簡寫屬性 | 1 | >[danger]padding顯示背景色，margin沒有 ?margin和padding都是間隔 如果加入了內邊距 padding?和邊框 border?后，它的總長度會增加。那么如果這個元素用于非常精確的布局時，我們就需要進行計算增減。這其實是比較煩人的操作，尤其是動態設置頁面布局的時候.屬性?box-sizing可以選擇避免掉布局元素盒子增加內邊距和邊框的長度增減問題 | **屬性** | **說明** | | --- | --- | | 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+ | //完整形式 ~~~ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; ~~~ **用Margin還是用Padding** 何時應當使用margin： 1、需要在border外側添加空白時。 2、空白處不需要背景（色）時。 3、上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。 何時應當時用padding： 1、需要在border內測添加空白時。 2、空白處需要背景（色）時。 3、上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px + 20px的padding，將得到35px的空白。 個人認為：**margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。**