元素布局
display 設置對象是否及如何顯示。IE7以下的瀏覽器不支持table相關的參數值。
紅色顏色顯示的屬性值為常用的值。
語法：display：none（隱藏對象，與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間） | inline（指定元素為內聯元素） | block（指定元素為塊級元素） | list-item | inline-block（指定元素為內聯塊級元素） | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box
使用頻率較高。
block塊級元素，寬高可以自己定義，並且獨占一行。用在行級元素轉換為塊級元素的情況中，例如要把<a>標簽設置寬高的情況。如果不設置display:block的話，a標簽仍然是一個行級標簽，只能根據內容改變它的大小，不能滿足要求。
如果想讓幾個塊級（或行級）標簽處在同一行，只要設置它們的display:inline-block即可。
visibility 設置是否顯示對象。與display屬性不同，此屬性為隱藏的對象保留其占有的物理空間。
語法：visibility：visible（可視） | hidden（隱藏） | collapse（主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對於表格外的其他對象等同於hidden。表格布局基本不使用，都是使用CSS+DIV。）
注意：如果希望對象是可見的，那么其父容器也必須是可見的。
這個屬性沒有繼承性。
使用頻率不高。
float 設置元素是否及如何浮動。通過浮動可以將塊級元素顯示在同一行。
使用頻率非常高（使用float：left較多）。
語法：float：none | left（浮動在左邊） | right（浮動在右邊）
當該屬性不為none引起對象浮動的時候，對象被看成是塊級元素（即display：block），浮動對象的display屬性將被忽略。
注意：該屬性還與元素的position屬性有關，它可以用在不適用絕對定位的任何元素上。而且浮動會根據父容器的空間來浮動，當父容器寬度不夠時會在下面另外的一行浮動顯示。適用於手機網頁的顯示，橫屏豎屏不同的效果。設置浮動后，下面的塊級標簽將不會再在單獨的一行顯示，需要設置clear屬性清除元素浮動達到目的。一般來說float和clear會搭配使用。
clear 指出不允許有浮動的邊。
語法：clear：none（允許兩邊都可以有浮動對象，默認值） | left（不允許左邊有浮動對象） | right（不允許右邊有浮動對象） | both （不允許有浮動對象）
使用頻率很高。
注意：通常在使用時不會把clear屬性設置在要顯示內容的標簽上，而是在浮動對象后單獨使用一個不顯示內容的塊級標簽來清除浮動，代碼的穩定性比較好。例如：
1 <ul> 2 <h3>float：left 設置元素右浮動</h3> 3 <p style="float:right;padding:5px 10px;">首頁</p> 4 <p style="float:right;padding:5px 10px;">服裝</p> 5 <p style="float:right;padding:5px 10px;">電器</p> 6 <p style="float:right;padding:5px 10px;">食品</p> 7 </ul> 8 <div style="clear:both;"></div> 9 <div>這里是一個div</div>
注意：子元素設置浮動后父元素的高度不再根據子元素的內容自動調整，而是變為0，因此出現在下面的塊級標簽將不會另外單獨顯示在一行，而是與浮動的子元素顯示在一行了。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>display元素的顯示</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 height:30px; 11 } 12 p { 13 border:1px solid red; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 第一層 20 </div> 21 <div style="display:none;"> 22 第二層 23 </div> 24 <div> 25 第三層 26 </div> 27 <ul> 28 <li> 29 <h3>display：block 行級標簽顯示為塊級標簽：要求讓a標簽寬高大一點，字體水平對齊垂直居中</h3> 30 <a href="#" style="background-color:pink;height:35px;line-height:35px;width:145px;text-align:center;display:block;">前端工程師</a> 31 <a href="#">谷歌</a> 32 </li> 33 <li> 34 <h3>display:inline-block 行級標簽顯示為內聯塊級標簽：要求讓a標簽寬高大一點，字體水平對齊垂直居中，且讓另一個a標簽與它在同一行</h3> 35 <a href="#" style="background-color:pink;height:35px;line-height:35px;width:145px;text-align:center;display:inline-block;">前端工程師</a> 36 <a href="#">谷歌</a> 37 </li> 38 <li> 39 <h3>visibility 元素的可見性</h3> 40 <div style="visibility:visible;"> 41 可見 42 </div> 43 <div style="visibility:hidden;"> 44 不可見 45 </div> 46 <div> 47 沒有設置visibility屬性的，上面是不可見的div 48 </div> 49 </li> 50 <li> 51 <h3>float：none 設置元素不浮動</h3> 52 <p>首頁</p> 53 <p>服裝</p> 54 <p>電器</p> 55 <p>食品</p> 56 </li> 57 <li> 58 <h3>float：left 設置元素左浮動</h3> 59 <p style="float:left;">首頁</p> 60 <p style="float:left;">服裝</p> 61 <p style="float:left;">電器</p> 62 <p style="float:left;">食品</p> 63 </li> 64 <li style="list-style:none;"> 65 <br/> 66 <br /> 67 </li> 68 <li> 69 <h3>float：left 設置元素右浮動</h3> 70 <p style="float:right;padding:5px 10px;">首頁</p> 71 <p style="float:right;padding:5px 10px;">服裝</p> 72 <p style="float:right;padding:5px 10px;">電器</p> 73 <p style="float:right;padding:5px 10px;">食品</p> 74 </li> 75 </ul> 76 <div style="clear:both;"> 77 設置浮動后，下面的塊級標簽將不會再在單獨的一行顯示，需要設置clear屬性清除元素浮動達到目的。一般來說float和clear會搭配使用。設置clear：both后，此div標簽在單獨的一行顯示。 78 </div> 79 </body> 80 </html>
運行結果如下圖所示：
clip 設置對象的可視區域，區域外的部分是透明的。
幾乎不使用。
語法：clip：auto（默認值，對象無剪切） | rect(<number>|auto <number>|auto <number>|auto <number>|auto)。
其中rect(<number>|auto <number>|auto <number>|auto <number>|auto)：依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值，其中任一數值都可用auto替換，即此邊不剪切。例如：rect（auto 50px 20px auto）表示的是上邊不剪切，右邊從第50個像素開始剪切到最右邊，下邊從第20個元素開始剪切直到最底部，左邊不剪切。
注意：如果要使用這個屬性，則必須設置position：absolute才可以。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>clip元素剪切，設置元素的可視區域</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <div style="background-color:pink;border:1px solid red;width:300px;height:400px;clip:rect(3px,70px,20px,1px);position:absolute;"> 10 Web前端開發 11 </div> 12 </body> 13 </html>
運行結果：
overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容，一般是要顯示的，不顯示時需要設置此屬性的屬性值。
語法：overflow：<overflow-style>{1,2}
其中：<overflow-style> = visible（默認，可見的） | hidden（隱藏） | scroll（將超出對象尺寸的內容進行裁剪，並以水平和豎直的滾動條的方式顯示超出的內容） | auto（在需要時剪切內容並添加豎直滾動條，此為body對象和textarea的默認值。）
使用頻率較高。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>OverflowDemo</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>不指定塊級元素的高度，自動適應文本</h3> 17 <div style="width:130px;">我喜歡網頁設計我喜歡網頁設計我喜歡網頁設計</div> 18 </li> 19 <li> 20 <h3>指定塊級元素的高度，超出部分應該使用overflow來設置裁剪與否或如何顯示</h3> 21 <div style="width:130px;height:26px;">我喜歡網頁設計我喜歡網頁設計我喜歡網頁設計</div> 22 </li> 23 <li style="list-style:none;"> 24 <br /> 25 </li> 26 <li> 27 <h3>指定塊級元素的高度，設置overflow：hidden隱藏超出的部分</h3> 28 <div style="width:130px;height:26px;overflow:hidden;">我喜歡網頁設計我喜歡網頁設計我喜歡網頁設計</div> 29 </li> 30 <li> 31 <h3>指定塊級元素的高度，設置overflow：scroll裁剪超出的部分，通過水平和垂直滾動條顯示</h3> 32 <div style="width:130px;height:60px;overflow:scroll;">我喜歡網頁設計aaaaaa我喜歡網頁設計我喜歡網頁設計</div> 33 </li> 34 <li> 35 <h3>指定塊級元素的高度，設置overflow：auto在需要時剪切內容並添加垂直方向的滾動條</h3> 36 <div style="width:130px;height:60px;overflow:auto;">佳佳佳佳佳佳我喜歡網頁設計我喜歡網頁設計我喜歡網頁設計</div> 37 </li> 38 </ul> 39 </body> 40 </html>
運行結果如下：
overflow-x 設置對象的內容超過其指定寬度時如何顯示內容。
overflow-y 設置對象的內容超過其指定高度時如何顯示內容。
元素定位
left 設置對象與其最近一個定位的父對象左邊相關的位置，必須定義position：absolute、relative或fixed，這個屬性才能生效。
top、bottom、right 與left相似。
使用頻率較為常用。
語法：left: <length>（用長度值來定義距離左邊的偏移量，可以為負值） | <percentage>（用父容器寬度的百分比來定義距離左邊的偏移量，可以為負值） | auto（默認的，表示沒有特殊定位）
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>元素定位示例</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body { 9 margin:0px; 10 padding:0px; 11 background-color:gray; 12 } 13 </style> 14 </head> 15 <body> 16 <div style="width:400px;height:200px;background-color:pink;left:100px;position:absolute;">body的子元素div，使用left定位，一定要設置position屬性為absolute或relative或fixed</div> 17 </body> 18 </html>
運行結果為：
像這種定位使用頻率非常高。可以用來設置漂浮廣告，即通過絕對定位和js的控制來設置。
注意：當left和right一起使用時，最終起作用的left；當top和bottom一起使用時，最終起作用的是top。
position 設置對象的定位方式。
語法：position：static（默認，無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。） | relative（對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。） | absolute（對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。） | fixed（對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象會隨着滾動，相對屏幕而言是固定的。）使用頻率非常高，使用absolute的地方比較多。
fixed用來固定某一對象（如京東的右邊欄和新浪的頂部不會隨滾動條滾動）。注意：在使用position：fixed時，必須制定元素的width屬性，否則有可能出現元素不顯示的問題。
有點晚啦，要早點回宿舍給爸爸媽媽撥視頻電話，position這么重要還是明天補上筆記吧~O(∩_∩)O~
------------------------------------------------我來補筆記啦！---------------------------------------------------
fixed示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>對象的定位方式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body { 9 margin:0px; 10 padding:0px; 11 } 12 #top { 13 background-color:orange; 14 height:68px; 15 position:fixed; 16 width:100%; 17 text-align:center; 18 line-height:68px; 19 } 20 #left { 21 position:absolute; 22 left:0; 23 height:1000px; 24 background-color:gray; 25 width:48px; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="top"> 31 <b>這里使用position：fixed，當出現滾動條時，這里隨滾動條滾動，相對於屏幕而言位置是固定的，永遠在頂部</b> 32 </div> 33 <div id="left"></div> 34 </body> 35 </html>
運行結果如下：（注意看滾動條的位置已經滾到頁面的底部了）
Position定位-情景一（外部層的布局模式是static，內部層一個是absolute，另一個是relative），示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>Position定位-情景一</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body { 9 background-color:green; 10 } 11 #outer { 12 border:1px solid blue; 13 margin:0 auto; 14 width:350px; 15 height:300px; 16 background-color:pink; 17 position:static; 18 } 19 #inner-1 { 20 position:absolute; 21 left:10px; 22 top:20px; 23 width:150px; 24 height:100px; 25 background-color:yellow; 26 } 27 #inner-2 { 28 position:relative; 29 left:10px; 30 top:20px; 31 width:150px; 32 height:100px; 33 background-color:gray; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="outer"> 39 <div id="inner-1"> 40 inner-1 position:absolute 41 </div> 42 <div id="inner-2"> 43 inner-2 position:relative 44 </div> 45 </div> 46 </body> 47 </html>
運行結果如下：
當外部層布局模式是static時，內部層使用absolute定位的話是相對於body布局的（根據top和left的值），內部層使用relative定位的話是以父容器為基准來定位的。
Position定位-情景二（外部層的布局模式不是static（最常用的是使用relative，而不使用absolute，因為absolute會改變此外部元素的顯示位置），內部層一個是absolute，另一個是relative），示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Position定位-情景二</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body { 9 background-color: green; 10 } 11 12 #outer { 13 border: 1px solid blue; 14 margin: 0 auto; 15 width: 350px; 16 height: 300px; 17 background-color: pink; 18 position: relative; 19 } 20 21 #inner-1 { 22 position: absolute; 23 left: 10px; 24 top: 20px; 25 width: 170px; 26 height: 100px; 27 background-color: yellow; 28 } 29 30 #inner-2 { 31 position: relative; 32 left: 10px; 33 top: 20px; 34 width: 150px; 35 height: 100px; 36 background-color: gray; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="outer"> 42 <div id="inner-1"> 43 inner-1 position:absolute 44 </div> 45 <div id="inner-2"> 46 inner-2 position:relative 47 </div> 48 </div> 49 </body> 50 </html>
運行結果如下：
當外部層布局模式不是static時，內部層使用absolute定位和使用relative定位都是以父容器為基准來定位的。
Position定位-情景三（在情景二的基礎上不使用left和top定位，使用right和bottom定位的話發現結果不在如上圖所示），示例代碼如下：
結論：內部元素的relative模式對right和bottom不起作用，absolute模式對right和bottom有效
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Position定位-情景三</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body { 9 background-color: green; 10 } 11 12 #outer { 13 border: 1px solid blue; 14 margin: 0 auto; 15 width: 350px; 16 height: 300px; 17 background-color: pink; 18 position: relative; 19 } 20 21 #inner-1 { 22 position: absolute; 23 right: 0px; 24 bottom: 0px; 25 width: 170px; 26 height: 100px; 27 background-color: yellow; 28 } 29 30 #inner-2 { 31 position: relative; 32 right: 0px; 33 bottom: 0px; 34 width: 150px; 35 height: 100px; 36 background-color: gray; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="outer"> 42 <div id="inner-1"> 43 inner-1 position:absolute 44 </div> 45 <div id="inner-2"> 46 inner-2 position:relative 47 </div> 48 </div> 49 </body> 50 </html>
運行結果如下：
position定位結論：子元素精確定位時使用absolute定位方式，它的父元素使用relative定位方式（使用absolute方式可能會使此父元素的位置發生改變）。
z-index 設置對象的層疊順序。必須定義position：absolute/relative/fixed才可以生效。
使用頻率很常用。
語法：z-index: auto（遵從父對象的定位） | <integer>（用整數值來定義堆疊級別。可以為負值。值越大越在上面。）
使用場景：如下拉出來浮動的層設置層疊順序較高才能正常顯示。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>z-index屬性設置對象的層疊順序</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 position:absolute; 10 width:200px; 11 height:200px; 12 } 13 </style> 14 </head> 15 <body> 16 <div style="background-color:black;z-index:10"> 17 18 </div> 19 <div style="background:orange;width:300px;height:300px;left:20px;top:20px;z-index:0;"> 20 21 </div> 22 </body> 23 </html>
運行結果如下：
不適用z-index時：
使用z-index時：
