CSS盒模型

　　文檔的每一個元素都被構形成文檔佈局內的一個盒模型，每層的大小均可以用CSS的響應屬性調整。盒子模型的相關屬性有 width height padding border margin。

　　下圖展現了盒模型的效果

　　

　　border寬默認是0，因此默認看不到border。

　　元素內容所佔據的大小是width和height定義的，也就是說不管元素的內容或子元素的內容佔據多大的空間都不會影響到內邊距或外邊距的大小。

　　width默認是可用空間的100%，而height則是content的高度。

　　當padding設置爲30px時，內容只會在左上內邊距有30px的padding。

　　margin外邊距有一個特別的行爲叫外邊距塌陷（margin collpaing），就是當兩個盒模型接觸時，他們的間距不是二者外邊距的和，而是取二者外邊距值較大的一個。

　　默認background-color/background-image延伸到border的外邊緣。

　　盒模型的高度不遵照百分比長度，而是採用內容的高度，除非指定了一個絕對的長度。

　　border也忽略百分比寬度設置。

　　有些時候你想把盒模型設置爲窗口寬度的50%，但邊界border和內邊距padding要用像素表示。爲避免這種問題，能夠修改border-sizing屬性爲border-box，使得盒模型變爲寬高包括內邊距和邊框大小的盒模型。

　　

　　內容溢出overfllow：當使用絕對的值設置一個框的大小時，內容可能不適合框的大小，這時能夠是用overfllow屬性來控制內容的顯示，auto產生滾動條， hide隱藏溢出部分， visible顯示溢出部分。

　　背景裁剪background-clip：盒子的背景是由background-color和background-image組成的，默認背景填充延伸到border的外側。能夠使用background-clip更改填充方式，border-box填充到border外側，是默認的填充方式，padding-box填充到padding內邊距，content-box僅填充內容區域。

　　輪廓outline：輪廓看起來像是邊界，但不屬於盒模型，不會影響盒模型的大小。輪廓顯示在border外側。

　　display屬性：能夠更改元素的顯示方式，經常使用的屬性值有block,inline,inline-block，block使元素有塊級元素的行爲，inline使元素有行內元素的行爲，inline-block元素不會換行但在行內有塊級元素行爲而且能夠設置寬高。塊級元素默認display屬性值是block，行內元素默認的display屬性值是inline。

　　行內元素width和height將失效，padding，border和margin會影響周圍文字的位置，但不會影響周圍的塊框。