CSS第四課
學習內容：
1.標簽的margin值：
用來控制標簽的外邊距，分別控制上、右、下、左的外邊距
1 #d1 { 2 width: 500px; 3 height: 300px; 4 background-color: red; 5 margin: 50px; 6 }
當只輸入一項數值時，所有方向上的外邊距被統一設定，而輸入兩個值時，則分別控制上下、左右的外邊距，四個值全部輸入則分別控制上、右、下、左的外邊距
2.標簽的padding值：
用來控制標簽的內邊距，分別控制上、右、下、左的內邊距
1 #d1 { 2 width: 400px; 3 height: 400px; 4 background-color: blue; 5 padding: 30px; 6 7 }
輸入數值對邊距的影響和margin是一樣的
ps:使用小技巧：只對上下padding設置距離，左右為auto，可實現content居中，只對上下margin設置距離，左右為auto，可實現整個元素居中
3.盒子模型
每個元素都有自己的盒子模型，通過對盒子模型各項數值的設定，可以達到給網頁排版的作用，比如利用div標簽，可實現網頁的分區和布局
通過上圖我們可以知道，一個元素實際占用的大小為：
高度=自身高度+padding（如果上下都有padding則加兩倍，只有一邊加一倍，沒有不加）+border（加的數值同padding一樣的規律）+margin（加的數值同padding一樣的規律）
寬度=自身寬度+padding（如果上下都有padding則加兩倍，只有一邊加一倍，沒有不加）+border（加的數值同padding一樣的規律）+margin（加的數值同padding一樣的規律）
4.外邊距合並
兩個相鄰的元素之間會發生外邊距的合並現象：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 #d1 { 8 width: 500px; 9 height: 100px; 10 background-color: red; 11 margin-bottom: 10px; 12 13 } 14 #d2 { 15 width: 500px; 16 height: 100px; 17 background-color: blue; 18 margin-top: 20px; 19 }/*外邊距合並，取最大值合並*/ 20 /*只有普通文檔流中塊框的垂直外邊距才會發生外邊距合並。行內框、浮動框或絕對定位之間的外邊距不會合並。*/ 21 </style> 22 </head> 23 24 <body> 25 <div id="d1"></div> 26 <div id="d2"></div> 27 </body> 28 </html>
實際執行效果如下，可以明顯的觀察到下方的div的頂部20px的margin被上方div的底部40px的margin給合並，兩者不會相加等於60px，而是根據對打數值來
5.position屬性
position屬性可用來調整元素的位置，通過設置位置屬性以及 top/right/bottom/left的數值來實現多種位移效果
position有如下3種常用屬性：
（1）fixed：固定，可以令元素固定在一個位置，不管滾動條如何滾動，都會固定在該位置，可以用來固定側面導航欄等
1 #d1 { 2 width: 200px; 3 height: 200px; 4 background-color: blue; 5 margin: 100px 10px 30px 50px; 6 float: left; 7 position: fixed; 8 left: 300px; 9 top: 50px; 10 }
（2）relative：相對位置，元素移動時參考的坐標是當前的位置
1 #d2 { 2 width: 200px; 3 height: 200px; 4 background-color: blue; 5 margin: 20px 10px 10px 20px; 6 float: left; 7 position: relative; 8 left: 30px; 9 top: 10px; 10 }
id為d2的元素相對於現在自身的位置向右移動了30px，向下移動了10px
（3）absolute：絕對位置，元素移動時的參考為最近的有position屬性的父元素，逐級向上尋找直到body標簽，如果想利用該屬性進行精確地位置調整，需要在上一級父元素設置position屬性
<head> <style> #d1 { width: 300px; height: 200px; background-color: red; margin: 10px; position: relative; } #d2 { width: 120px; height: 80px; background-color: blue; margin: 15x; position: absolute; left: 20px; } </style> </head> <body> <div id="1"> <div id="2"> 456 </div> </div> </body>
PS：輸入位移數據時註意，上下左右代表的是遠離上下左右方向多少距離，而不是向上下左右移動多少距離，當然，把數值設為負就可以起到該效果
6.元素堆疊次序 z-index
該項屬性可以控制重疊元素的顯示優先級，默認值為0，數值越大優先級越高，數值可為負
請註意：z-index 僅能在定位元素上奏效（例如 position:absolute;）！
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 #d1 { 8 height: 300px; 9 width: 300px; 10 background-color: red; 11 position: relative; 12 left: 100px; 13 z-index: 1; 14 } 15 #d2 { 16 height: 150px; 17 width: 120px; 18 background-color: blue; 19 position:absolute; 20 left: 50px; 21 top: 50px; 22 } 23 </style> 24 </head> 25 26 <body> 27 <div id="d1"></div> 28 <div id="d2"></div> 29 </body> 30 </html>
下面兩張圖片展示了id為d1的div設置z-index為1前後的效果
設置前：
設置後：
7.行內元素與塊級元素之間的轉換
通過設置display的block/inline屬性來實現塊級元素和行內元素自定義
（1）ul、li塊級元素轉為行內元素，可以實現橫向導航欄：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 ul 6 { 7 list-style-type:none; 8 margin:0; 9 padding:0; 10 } 11 li 12 { 13 display:inline; 14 } 15 </style> 16 </head> 17 18 <body> 19 <ul> 20 <li> 21 <a href="#home">Home</a> 22 </li> 23 <li> 24 <a href="#news">News</a> 25 </li> 26 <li> 27 <a href="#contact">Contact</a> 28 </li> 29 <li> 30 <a href="#about">About</a> 31 </li> 32 </ul> 33 34 </body> 35 </html>
（2）行內元素轉為塊級元素
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 span { 8 display: block; 9 color: aliceblue; 10 background-color: darkcyan; 11 } 12 </style> 13 </head> 14 15 <body> 16 <span>I‘m block!</span> 17 18 </body> 19 </html>
span標簽變為塊元素，獨占一行：
CSS第四課