布局屬性
盒子模型，英文即box model。無論是div、span、還是a都是盒子。
但是，、表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。
css盒模型，包含元素內容content，內邊距padding，邊框border，外邊距margin。
元素的內邊距在邊框和內容之間。該屬性不能為負值。
css內邊距的屬性：
屬性說明
padding-top元素的上內邊距
padding-right元素的右內邊距
padding-bottom元素的下內邊距
padding-left元素的左內邊距
padding用乙個宣告定義所有內邊距屬性
指定乙個值時 該值指定四個邊的內邊距
指定兩個值時 第乙個值指定上下兩邊的內邊距 第二個指定左右兩邊的內邊距
指定三個值時 第乙個指定上邊的內邊距.第二個指定左右兩邊 第三個指定下邊
指定四個值時分別為上 右 下 左（順時針順序）。
padding
: 10px 10px 10px 10px;
說明margin-top定義元素的上外邊距
margin-right定義元素的右外邊距
margin-bottom定義元素的下外邊距
margin-left定義元素的左外邊距
margin用乙個宣告定義所有外邊距屬性
margin
: 20px 0px 0 -20px;
指定的外邊距允許為負數。margin的top和bottom屬性對非替換內聯元素無效，例如和。屬性
說明border-left-style左邊框的樣式屬性
border-left-width設定下邊框的寬度屬性
border-left用一條宣告定義所有左邊框的屬性
border用一條宣告定義所有邊框的屬性
border-width一次定義4條邊框的寬度
border-color一次定義4條邊框的顏色
邊框的樣式
邊框樣式 樣式
說明none無邊框效果
hidden與none相同
dotted點線邊框效果
dashed虛線邊框效果
double雙線邊框效果
solid實線邊框效果
groove3d凹槽邊框效果
ridge3d凸槽邊框效果
css輪廓是繪製在元素周圍的一條線，位於邊框邊緣的外圍，起到突出元素的作用。
屬性說明
outline-style定義輪廓的樣式屬性
outline-color定義輪廓的顏色屬性
outline-width定義輪廓的寬度屬性
outline同乙個宣告中定義所有的輪廓屬性
浮動，定位
屬性說明
float
設定框是否需要浮動以及浮動方向
clear設定元素的哪一側不允許出現其他浮動元素
clip裁剪絕對定位元素，該元素必須是絕對定位，上右下左原則
overflow設定內容溢位元素框時的處理方式，值：visible,auto,hidden,scroll
display設定元素如何顯示，值none,block,inline,inline-block,inherit
visibility定義元素是否可見，visibility設定為隱藏，元素占用的空間依然會保留，但display:none不保留占用空間，值：visible,hidden
float
: none|left|right|initial|inherit;
position值
說明static該關鍵字指定元素使用正常的布局行為，即元素在文件常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative該關鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。
absolute元素會被移出正常文件流，並不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設定外邊距（margins），且不會與其他邊距合併。
fixed元素會被移出正常文件流，並不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。列印時，元素會出現在的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform, perspective 或 filter 屬性非 none 時，容器由視口改為該祖先。
sticky元素根據正常文件流進行定位，然後相對它的最近滾動祖先（nearest scrolling ancestor）和 containing block (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基於top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其他元素的位置。該值總是建立乙個新的層疊上下文（stacking context）。注意，乙個sticky元素會「固定」在離它最近的乙個擁有「滾動機制」的祖先上（當該祖先的overflow 是 hidden, scroll, auto, 或 overlay時），即便這個祖先不是真的滾動祖先。這個阻止了所有「sticky」行為（詳情見github issue on w3c csswg）。 屬性
說明position元素的定位型別，值static,absolute絕對，relative相對
top元素上外邊距
right元素右外邊距
bottom元素下外邊距
left元素的左外邊距 定位
說明相對定位相對定位的元素是在文件中的正常位置偏移給定的值，但是不影響其他元素的偏移
絕對定位相對定位的元素並未脫離文件流，而絕對定位的元素則脫離了文件流。在布置文件流中其它元素時，絕對定位元素不佔據空間。絕對定位元素相對於最近的非 static 祖先元素定位。
固定定位固定定位與絕對定位相似，但元素的包含塊為 viewport 視口。該定位方式常用於建立在滾動螢幕時仍固定在相同位置的元素。
粘性定位粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之後為固定定位。須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
**詳見
CSS布局之 盒模型與聖杯布局
盒模型 在css布局的編寫中，盒模型的概念必須要搞清楚，才能更好的體現出前端 的能力。在此之前，我們需要弄清楚幾個名詞。包含塊包含塊對於浮動元素來說，定義為最近的塊級祖先元素，但對於定位來說，情況則沒有這麼簡單，css2.1定義了一下行為 根元素 的包含塊 也稱為初始包含塊 由使用者 建立，在htm...
CSS盒模型及Float簡單布局
預設情況下，width和height只包括內容區域的寬和高，不包括border padding margin 使用box sizing可以使其包含content padding border width和height屬性包括content padding和border，但是不包括margin 外邊距...
CSS盒模型與布局
1.1兩種基本的盒模型 block型別 這種盒模型的元素不會佔據一行，允許通過 css設定寬度 高度。例如 元素。inline元素 這種盒模型的元素不會佔據一行 預設允許在一行放置許多元素 即使通過 css設定高度和寬度也不會起作用。例如,css為display屬性提供了block和inline兩個...