HTML5權威指南筆記：20-使用盒模型

1 爲元素應用內邊距

內邊距屬性：

屬性	說明	值
padding-top	爲頂邊設置內邊距	長度值或百分數
padding-right	爲右邊設置內邊距	長度值或百分數
padding-bottom	爲底邊設置內邊距	長度值或百分數
padding-left	爲左邊設置內邊距	長度值或百分數
padding	簡寫屬性，在一條聲明中設置所有邊的內邊距。省略左邊的值，默認使用右邊的值；省略底邊的值，默認使用頂邊的值。	1~4個長度值或百分數

例子：

padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
padding: 5px 25px 5px 40px;

2 爲元素應用外邊距

外邊距屬性：

屬性	說明	值
margin-top	爲頂邊設置外邊距	長度值或百分數
margin-right	爲右邊設置外邊距	長度值或百分數
margin-bottom	爲底邊設置外邊距	長度值或百分數
margin-left	爲左邊設置外邊距	長度值或百分數
margin	簡寫屬性，在一條聲明中設置所有邊的外邊距。省略左邊的值，默認使用右邊的值；省略底邊的值，默認使用頂邊的值。	1~4個長度值或百分數

例子：

margin:4px 20px;

3 控制元素的尺寸

尺寸屬性：

屬性	說明	值
Width Height	設置元素的寬度和高度	auto、長度值或者百分數
min-width min-height	爲元素設置最小可接受寬度和高度	auto、長度值或者百分數
max-width max-height	爲元素設置最大可接受寬度和高度	auto、長度值或者百分數
box-sizing	設置尺寸調整應用到元素盒子的哪一部分	content-box 、padding-box 、border-box 、margin-box

例子：爲元素設置尺寸

/*百分數值是根據包含塊的寬度來計算的*/
width: 75%;
height: 100px;
min-width: 100px;
max-width: 200px;
box-sizing: border-box;

4 處理溢出內容

overflow屬性：

屬性	說明	值
overflow-x overflow-y	設置水平方向和垂直方向的溢出方式	見下面說明
overflow	簡寫屬性	overflow overflow-x overflow-y

overflow屬性的值：

1. auto：瀏覽器自行處理溢出內容。通常，如果內容被剪掉就顯示滾動條，否則就不顯示（這是相較scroll值來說的，設置該值後，無論內容是否溢出都有滾動條）。
2. hidden：多餘的部分直接剪掉，只顯示內容盒裏面的內容。如果用戶想看看剪掉的這部分內容，對不起，做不到。
3. no-content：如果內容無法全部顯示，就直接移除。主流瀏覽器都不支待這個值。
4. no-display：如果內容無法全部顯示，就隱藏所有內容。主流瀏覽器都不支持這個值。
5. scroll：爲了讓用戶看到所有內容，瀏覽器會添加滾動機制。通常是滾動條，不過這個值跟具體的平臺和瀏覽器相關。即使內容沒有溢出也能看到滾動條。
6. visible：默認值，不管是否溢出內容盒，都顯示元素內容。

例子：

overflow: hidden;

5 控制元素的可見性

visibility屬性的值：
collapse：元素不可見，且在頁面佈局中不佔據空間。
hidden：元素不可見，但在頁面佈局中佔據空間。
visible：默認值， 元素在頁面上可見。

例子：

/*collapse值只能應用到表相關元素，如tr和td*/
visibility: hidden;

6 設置元素的盒類型

display屬性的值：

值	說明
inline	盒子顯示爲文本行中的字
block	盒子顯示爲段落
inline-block	盒子顯示爲文本行
list-item	盒子顯示爲列表項，通常具有項目符號或者其他標記符（如索引號）
run-in	盒子類型取決於周圍的元素
compact	盒子的類型爲塊或者標記盒（跟list-item類型產生的類似）。本書撰寫時主流瀏覽器都不支待這個值
flexbox	這個值跟彈性盒佈局相關，會在第21章介紹
table inline-table table-row-group table-header-group table-footer-group table-row table-column -group table-column table-cell table-caption	這些值跟表格中的元素佈局相關，詳細信息參見第21章
ruby ruby-base ruby-text ruby-base-group ruby-text-group	這些值跟帶ruby註釋的文本佈局相關
none	元素不可見，且在頁面佈局中不佔空間

例子：

display: block;

特別說明：
display屬性設置爲run-in值會創建一個這樣的元素： 其盒子類型取決於周圍元素。

1. 如果插入元素包含一個display屬性值爲block的元素，那麼插入元素就是塊級元素。
2. 如果插入元素的相鄰兄弟元素是塊級元素，那麼插入元素就是兄弟元素中的第一個行內元素。
3. 其他情況下，插入元素均作爲塊級元素對待。

7 創建浮動盒

float屬性的值：
left：移動元素，使其左邊界挨着包含塊的左邊界，或者另一個浮動元素的右邊界
right：移動元素，使其右邊界挨着包含塊的右邊界，或者另一個浮動元素的左邊界
none：元素位置固定

例子：

float: left;

阻止浮動元素堆疊
clear屬性的值：
left：元素的左邊界不能挨着另一個浮動元素。
right：元素的右邊界不能挨着另一個浮動元素。
both：元素的左右邊界都不能挨着浮動元素。
none：元素的左右邊界都可以挨着浮動元素。

例子：

clear: left;