頁面版式主要由三個屬性控制: position 屬性、 display 屬性和 float 屬性。其中,position 屬性控制頁面上元素間的位置關係, display 屬性控制元素是堆疊、並排,仍是根本不在頁面上出現, float 屬性提供控制的方式,以便把元素組成成多欄佈局。瀏覽器
盒子模型有關的三個屬性佈局
邊框(border) 。能夠設置邊框的寬窄、樣式和顏色。spa
內邊距(padding) 。能夠設置盒子內容區與邊框的間距。it
外邊距(margin) 。能夠設置盒子與相鄰元素的間距。io
邊框(border)有 3 個相關屬性。擴展
寬度(border-width)。可使用 thin、 medium 和 thick 等文本值,也可使用除百分比和負值以外的任何絕對值。float
樣式(border-style)。有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、ridge、 inset 和 outset 等文本值。經驗
顏色(border-color)。可使用任意顏色值,包括 RGB、 HSL、十六進制顏色值和顏色關鍵字。樣式
默認值margin
默認狀況下,邊框的三個相關屬性的值分別爲 border-width:medium;border-style:none;border-color:black;
疊加外邊距
垂直方向上的外邊距會疊加。像這樣上下外邊距相遇時,它們就會相互重疊,直至一個外邊距碰到另外一個元素的邊框
--垂直方向上疊加外邊距,哪一個大外邊距既是哪一個。
--疊加的只是垂直外邊距,水平外邊距不疊加。對於水平相鄰的元素,它們的水平間距是相鄰外邊距之和
外邊距的單位
--根據經驗,爲文本元素設置外邊距時一般須要混合使用不一樣的單位。好比說,一個段落的左、右外邊距可使用像素,以便該段文本始終與包含元素邊界保持固定間距,不受字號變大或變小的影響。而對於上、下外邊距,以 em 爲單位則可讓段間距隨字號變化而相應增大或縮小。
盒子有多大
1.沒有寬度的盒子
所謂「沒有寬度」就是指沒有顯式地設置元素的 width 屬性。若是不設置塊級元素的 width 屬性,那麼這個屬性的默認值是 auto,結果會讓元素的寬度擴展到與父元素同寬。
--盒模型結論一:沒有(就是沒有設置 width 的)寬度的元素始終會擴展到填滿其父元素的寬度爲止。添加水平邊框、內邊距和外邊距,會致使內容寬度減小,減小量等於水平邊框、內邊距和外邊距的和。
2.有寬度的盒子
--盒模型結論二:爲設定了寬度的盒子添加邊框、內邊距和外邊距,會致使盒子擴展得更寬。實際上,盒子的 width 屬性設定的只是盒子內容區的寬度,而非盒子要佔據的水平寬度。
--CSS3 新增了一個 box-sizing 屬性,經過它能夠將有寬度的盒子也設定成具備默認的auto 狀態下的行爲。但只有最新版本的瀏覽器才支持該屬性