一、盒子模型（Box Model） 盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標 ...
一、盒子模型（Box Model）
盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。當設置一個元素的樣式如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 100px; height: 100px; margin: 20px; padding: 20px; border: 10px solid blue; } </style> </head> <body> <div id="box"> Box Model </div> </body> </html>
運行結果：
1.1、寬度測試
計算最大寬度，示例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 800px; padding: 10px; border: 5px solid blue; margin: 10px; } .sbox{ display: inline-block; padding: 10px; margin: 10px; border: solid 10px coral; background: lightblue; width: ?; } </style> </head> <body> <div id="box"> <div class="sbox">Left</div><div class="sbox">Right</div> </div> </body> </html>
要達到如下效果，請求?處最大可以設置為多少像素？
答案：
340pxView Code
1.2、溢出測試
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 800px; padding: 10px; border: 5px solid blue; margin: 10px; height: 100px; } #box #innerBox{ background: lightblue; height:50px ; width: 100%; padding: 10px; margin: 10px; border: 10px solid lightcoral; } </style> </head> <body> <div id="box"> <div id="innerBox"> innerBox </div> </div> </body> </html>
請問運行時innerBox是否會超出box，如果會，超出多少？
可見部分=850-815=35，還有10個margin不可見，45px
View Code
如果不想讓innerBox超出，則應該刪除其100%的寬度設置，去掉width:100%，一般不要設置，多此一舉。
1.3、box-sizing屬性
設置或檢索對象的盒模型組成模式
content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為標準模式下的盒模型。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 100px; height: 100px; padding: 10px; border: 10px solid blue; margin: 10px; } </style> </head> <body> <div id="box"> Box Model </div> </body> </html>
運行結果：
因為預設就是為content-box所以這裡沒有直接設置，占用寬度為160px;
border-box： padding和border被包含在定義的width和height之內。對象的實際寬度就等於設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現為怪異模式下的盒模型。
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 100px; height: 100px; padding: 10px; border: 10px solid blue; margin: 10px; box-sizing: border-box; /*在上一個例子中添加的*/ } </style> </head> <body> <div id="box"> Box Model </div> </body> </html>
運行結果：
當box-sizing: border-box時的寬度設置會包含border與padding，但不包含margin，但margin也會占用位置。
1.4、利用CSS畫圖
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型 - 三角形</title> <style type="text/css"> #box{ width: 0; height: 0; border: 100px solid blue; border-color: blue transparent transparent transparent; /*設置邊線的顏色，transparent表示透明的顏色，按上右下左的順時鐘方向*/ } </style> </head> <body> <div id="box"> </div> </body> </html>
運行結果：
心形：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #heart { position: relative; width: 100px; height: 90px; } #heart:after,#heart:before { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0px 0px; transform: rotate(-45deg); transform-origin: 0 100%; } #heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } </style> </head> <body> <div id="heart"> </div> </body> </html>
運行結果：
二、邊距摺疊
2.1、概要
外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）
相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係，如：
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ border: 3px solid blue; height: 200px; background: lightcoral; } #div2{ height: 100px; background: lightgreen; margin-top: 20px; } #div3{ height: 50px; width: 50%; background: lightblue; margin-top: 20px; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>
運行結果：
因為div2與div3的外邊距是相鄰的（是父子關係的相鄰），當div2 margin-top為20,div3的margin-top也為20,此時div2與div3的外邊距會合併，就是摺疊。
如果想讓div3的margin-top生效，可以破壞相鄰的限制，示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ border: 3px solid blue; height: 200px; background: lightcoral; } #div2{ height: 100px; background: lightgreen; margin-top: 20px; border: 1px solid green; } #div3{ height: 50px; width: 50%; background: lightblue; margin-top: 20px; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>View Code
運行結果：
2.2、垂直方向外邊距合併計算
a)、參加摺疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>邊距摺疊</title> </head> <body> <div style="height:90px; margin-bottom:99px; width:90px; background-color: red;">X</div> <div style="height:90px; margin-top:100px; width:90px; background-color: blue;">Y</div> </body> </html>
運行結果：
b)、參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>邊距摺疊</title> </head> <body> <div style="height:90px; margin-bottom:-10px; width:90px; background-color: red;">X</div> <div style="height:90px; margin-top:-30px;width:70px; background-color: blue;">Y</div> </body> </html>
結果：
c)、參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>參與摺疊的 margin 中有正值，有負值</title> </head> <body> <div style="height:90px; margin-bottom:-30px; width:90px; background-color: red;">X</div> <div style="height:90px; margin-top:30px;width:70px; background-color: blue;">Y</div> </body> </html>
運行結果：
三、內聯與塊級標簽
3.1、行內標簽與塊標簽區別
html中的標簽預設主要分為兩大類型，一類為塊級元素，另一類是行內元素，許多人也把行內稱為內聯，所以叫內聯元素，其實就是一個意思。為了很好的佈局，必須理解它們間的區別，區別如下：
常用塊級與內聯元素：
內聯元素（行內元素）內聯元素(inline element) a - 超鏈接 abbr - 縮寫 acronym - 首字 bdo - bidi override big - 大字體 br - 換行 cite - 引用 code - 電腦代碼(在引用源碼的時候需要) dfn - 定義欄位 em - 強調 i - 斜體 img - 圖片 input - 輸入框 kbd - 定義鍵盤文本 label - 表格標簽 q - 短引用 samp - 定義範例電腦代碼 select - 項目選擇 small - 小字體文本 span - 常用內聯容器，定義文本內區塊 strike - 中劃線 strong - 粗體強調 sub -<
