CSS定位元素--盒子模型

        頁面版式主要由三個屬性控制： position 屬性、 display 屬性和 float 屬性。其中，position 屬性控制頁面上元素間的位置關係， display 屬性控制元素是堆疊、並排，仍是根本不在頁面上出現， float 屬性提供控制的方式，以便把元素組成成多欄佈局。

盒子模型有關的三個屬性

邊框（border） 。能夠設置邊框的寬窄、樣式和顏色。

內邊距（padding） 。能夠設置盒子內容區與邊框的間距。

外邊距（margin） 。能夠設置盒子與相鄰元素的間距。

邊框（border）有 3 個相關屬性。

寬度（border-width）。可使用 thin、 medium 和 thick 等文本值，也可使用除百分比和負值以外的任何絕對值。

樣式（border-style）。有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、ridge、 inset 和 outset 等文本值。

顏色（border-color）。可使用任意顏色值，包括 RGB、 HSL、十六進制顏色值和顏色關鍵字。

默認值

默認狀況下，邊框的三個相關屬性的值分別爲 border-width:medium;border-style:none;border-color:black;

疊加外邊距

垂直方向上的外邊距會疊加。像這樣上下外邊距相遇時，它們就會相互重疊，直至一個外邊距碰到另外一個元素的邊框

--垂直方向上疊加外邊距，哪一個大外邊距既是哪一個。

--疊加的只是垂直外邊距，水平外邊距不疊加。對於水平相鄰的元素，它們的水平間距是相鄰外邊距之和

外邊距的單位

--根據經驗，爲文本元素設置外邊距時一般須要混合使用不一樣的單位。好比說，一個段落的左、右外邊距可使用像素，以便該段文本始終與包含元素邊界保持固定間距，不受字號變大或變小的影響。而對於上、下外邊距，以 em 爲單位則可讓段間距隨字號變化而相應增大或縮小。

盒子有多大

1.沒有寬度的盒子

所謂「沒有寬度」就是指沒有顯式地設置元素的 width 屬性。若是不設置塊級元素的 width 屬性，那麼這個屬性的默認值是 auto，結果會讓元素的寬度擴展到與父元素同寬。

--盒模型結論一：沒有（就是沒有設置 width 的）寬度的元素始終會擴展到填滿其父元素的寬度爲止。添加水平邊框、內邊距和外邊距，會致使內容寬度減小，減小量等於水平邊框、內邊距和外邊距的和。

2.有寬度的盒子

--盒模型結論二：爲設定了寬度的盒子添加邊框、內邊距和外邊距，會致使盒子擴展得更寬。實際上，盒子的 width 屬性設定的只是盒子內容區的寬度，而非盒子要佔據的水平寬度。

--CSS3 新增了一個 box-sizing 屬性，經過它能夠將有寬度的盒子也設定成具備默認的auto 狀態下的行爲。但只有最新版本的瀏覽器才支持該屬性