行級元素之間的空白距離
如下圖所示：（看似是一張圖，實際上是三張圖分別放在<a>標簽中實現，如果沒有經過特殊的處理，那么圖與圖之間就會留有空隙，影響頁面布局的效果）
示例代碼如下：
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 a { 9 text-decoration:none; 10 } 11 </style> 12 <!--<link rel="stylesheet" type="text/css" href="公共和個性化樣式.html" />--> 13 </head> 14 <body> 15 <div id="deceng"> 16 <a href="#"> 17 <img src="../img/ch1.jpg"/> 18 </a> 19 <a href="#"> 20 <img src="../img/ch2.jpg" /> 21 </a> 22 <a href="#"> 23 <img src="../img/ch3.jpg" /> 24 </a> 25 </div> 26 </body> 27 </html>
運行結果：
此時需要把html文檔中行級標簽之間的距離都去掉，即將所有的<a>標簽寫在同一行中且之間沒有距離即可。如下所示：
1 <body> 2 <div id="deceng"> 3 <a href="#"><img src="../img/ch1.jpg"/></a><a href="#"><img src="../img/ch2.jpg" /></a><a href="#"><img src="../img/ch3.jpg" /></a> 4 </div> 5 </body>
之后三個圖片之間的距離就沒有了！這特么是在逗我玩啊……感覺這個筆記再更新下去的話我就要變成段子手了……
看評論區有好心人指正我，這里只要把“deceng”div的font-size設置為0就可以出現相同的效果。掌聲在哪里，謝謝好心人指點~
設定行級元素的尺寸
默認情況下，行級元素的寬度和高度都是自動的，那么有需要修改高度和寬度時應該怎么辦？
有兩種方式：1.使用display：block，變成塊級元素；2.使用position：absolute絕對定位，設置絕對定位后默認的寬度和高度都是0，需要設定高度和寬度具體的值。一般情況下，設置行級元素width：100%和height：100%都沒有效果，但是使用絕對定位后會有效果。
示例代碼如下：
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 #baidu { 9 text-decoration:none; 10 width:100px; 11 height:50px; 12 display:block; 13 background-color:pink; 14 color:black; 15 } 16 #guge { 17 text-decoration:none; 18 width:100px; 19 height:50px; 20 background-color:pink; 21 color:black; 22 position:absolute ; 23 } 24 </style> 25 </head> 26 <body> 27 <ul> 28 <li> 29 <h3>方式一：設定display：block</h3> 30 <a id="baidu" href="#">百度</a> 31 </li> 32 <li> 33 <h3>方式二：設定position：absolute</h3> 34 <a id="guge" href="#">谷歌</a> 35 </li> 36 </ul> 37 38 </body> 39 </html>
運行結果：
重點重點重點：position的定位
position：absolute 絕對定位（不設置left、top、right、bottom屬性值時，以下規則沒用，都是以父容器為參考進行絕對定位）
父容器為static布局：絕對定位以最近的非static父容器可視范圍作為參照（如窗體的可視區作為參照）
父容器為非static布局：絕對定位以父容器作為參照
注意<html>也是盒子模型。
父容器是static布局，子元素是absolute布局的情況，示例代碼如下：
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 html { 9 border:2px solid blue; 10 margin:20px 0 0 30px; 11 /*默認是static定位*/ 12 } 13 body { 14 height:300px; 15 border:2px solid red; 16 /*默認是static定位*/ 17 } 18 #abs1 { 19 position:absolute; 20 left:0; 21 bottom:0; 22 width:100px; 23 height:100px; 24 background-color:pink; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="abs1"> 30 31 </div> 32 </body> 33 </html>
運行結果：
在此例中，div使用的是absolute定位，它的父容器body使用了static定位，而它的祖父元素html也使用了static定位，此時div將會以最近的非static容器（窗體）為參照進行絕對定位，於是出現上圖所示的效果。
如果把該例中的html的定位方式設置為position：relative（非static方式），此時div就將會以最近的非static容器（html）為參照進行絕對定位，效果如下圖所示：
父容器是非static布局（這里用relative），子元素是absolute布局的情況，示例代碼如下：
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 html { 9 border:2px solid blue; 10 margin:20px 0 0 30px; 11 /*默認是static定位*/ 12 /*position:relative;*/ 13 } 14 body { 15 height:300px; 16 border:2px solid red; 17 /*默認是static定位*/ 18 position:relative; 19 } 20 #abs1 { 21 position:absolute; 22 left:0; 23 bottom:0; 24 width:100px; 25 height:100px; 26 background-color:pink; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="abs1"> 32 33 </div> 34 </body> 35 </html>
運行結果：
以上幾個例子就說明了為什么在網頁設計中父元素常常使用relative定位方式。
如果不設置left、top、right、bottom，元素脫離文檔流並不會占位。（默認的文檔流為：從左到右，從上到下）
作用：z-index可起到作用，width和height也起到作用。
示例代碼如下：
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 html { 9 border:2px solid blue; 10 margin:20px 0 0 30px; 11 /*默認是static定位*/ 12 /*position:relative;*/ 13 } 14 body { 15 height:300px; 16 border:2px solid red; 17 /*默認是static定位*/ 18 } 19 #abs1 { 20 position:absolute; 21 /*left:0; 22 bottom:0;*/ 23 width:100%; 24 height:100px; 25 background-color:pink; 26 margin-left:20px; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="abs1"> 32 33 </div> 34 <div style="height:200px;background:green;z-index:2;"> 35 36 </div> 37 </body> 38 </html>
運行結果為：
可以看到，綠色塊起點與粉紅色塊起點一樣都是在左上角，說明粉紅色塊並沒有占位。
position：relative 總是以父容器作為參考點。
left和top值有效，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 html { 9 border:2px solid blue; 10 margin:20px 0 0 30px; 11 /*默認是static定位*/ 12 position:relative; 13 } 14 body { 15 height:300px; 16 border:2px solid red; 17 /*默認是static定位*/ 18 } 19 #abs1 { 20 position:relative; 21 /*left:0; 22 bottom:0;*/ 23 width:100px; 24 height:100px; 25 background-color:pink; 26 left:50px; 27 top:50px; 28 } 29 #second { 30 background-color:black; 31 height:60px; 32 } 33 </style> 34 </head> 35 <body> 36 <div id="abs1"> 37 38 </div> 39 <div id="second"> 40 41 </div> 42 </body> 43 </html>
運行結果如下：
【面試題】position設置后元素會不會脫離文檔流？
分情況說明。
position：absolute絕對定位時，如果不設置left、top、right、bottom屬性值的話，元素將會脫離文檔流並不會占位。
position：relative相對定位時，無論設置還是不設置left、top、right、bottom屬性值，元素都不會脫離文檔流，都會占位。
選項卡的設計與制作
例如：（京東首頁，選中的部分頂部有紅色條顯示，動態控制樣式需要使用js）
高能預警，我又要畫圖了……用畫圖板，還要寫字呢！！！害怕……
設計結構如下：a標簽使用絕對定位，頂邊框粗一點，底部沒有，背景顏色是白色，a標簽向覆蓋div的紅色邊框。其他部分……看！！！！！圖！！！！！
是不是感覺自己又能上天了！
我猜是的。
示例代碼如下：
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 ul, li { 9 margin:0; 10 padding:0; 11 list-style:none; 12 } 13 a { 14 text-decoration:none; 15 font:400 12px/12px 宋體; 16 color:black; 17 } 18 #xuanxiangka { 19 border-bottom:1px solid #c81623; 20 height:35px; 21 } 22 #xuanxiangka .title li { 23 float:left;/*浮動會導致父容器ul和div高度為0，需要給父容器設定高度才可以顯示出border-bottom的效果*/ 24 width:85px; 25 height:35px; 26 line-height:35px; 27 text-align:center; 28 position:relative; 29 z-index:3; 30 } 31 /*分割線的設計*/ 32 #xuanxiangka .title li span { 33 width:1px; 34 background-color:gray; 35 overflow:hidden; 36 display:block;/*因為span是行級標簽，要使設置的width屬性有效，需要使其變為塊級標簽顯示*/ 37 position:absolute; 38 right:0; 39 top:10px; 40 height:18px; 41 } 42 /*ul邊框的設計*/ 43 #xuanxiangka .title { 44 border:1px solid gray; 45 height:35px; 46 border-bottom:none; 47 margin-left:500px; 48 } 49 /*選中的a標簽樣式的設計*/ 50 #xuanxiangka .title .title-selected a { 51 border:1px solid #c81623; 52 display:block;/*將行級元素變成塊級元素才能設定它的寬度和高度*/ 53 width:86px; 54 height:33px; 55 line-height:35px; 56 text-align:center; 57 border-top:3px solid #c81623; 58 z-index:5;/*li標簽賦值為3，為了覆蓋掉下面的紅色線條*/ 59 position:absolute; 60 top:-1px; 61 left:-1px;/*向左移動1px，覆蓋掉左邊邊框*/ 62 background-color:white; 63 border-bottom:none;/*底部邊框超出紅色底線1px，去掉底部邊框，設置背景色為白色，就把原來的紅色線條覆蓋了*/ 64 } 65 </style> 66 </head> 67 <body> 68 <div id="xuanxiangka"> 69 <ul class="title"> 70 <li class="title-item title-selected"><a href="javascript:void(0)">大牌</a><span>a</span></li> 71 <li class="title-item"><a href="javascript:void(0)">男裝</a><span>a</span></li> 72 <li class="title-item"><a href="javascript:void(0)">女裝</a><span>a</span></li> 73 <li class="title-item"><a href="javascript:void(0)">鞋靴</a><span>a</span></li> 74 <li class="title-item"><a href="javascript:void(0)">箱包</a><span>a</span></li> 75 <li class="title-item title-selected"><a href="javascript:void(0)">內衣配飾</a><span>a</span></li> 76 <li class="title-item"><a href="javascript:void(0)">珠寶首飾</a><span>a</span></li> 77 <li class="title-item"><a href="javascript:void(0)">奢品禮品</a><span>a</span></li> 78 <li class="title-item"><a href="javascript:void(0)">奢華腕表</a><span>a</span></li> 79 </ul> 80 </div> 81 </body> 82 </html>
運行結果：
使用偽類樣式實現動態效果
:hover 鼠標懸浮，改變背景顏色
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>hover鼠標懸浮樣式的設置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 ul { 9 list-style:none; 10 } 11 li { 12 height:28px; 13 line-height:28px; 14 } 15 li:hover { 16 background-color:orange; 17 color:white; 18 display:block; 19 height:50px; 20 line-height:50px; 21 cursor:pointer; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>標題一</li> 28 <li>標題二</li> 29 <li>標題三</li> 30 <li>標題四</li> 31 </ul> 32 </body> 33 </html>
運行結果：
transform與transition搭配使用 （去看文檔！！！）
transform 過渡轉換的過程（即以什么樣的方式進行轉換，比如說旋轉，翻轉，上下移動這種樣式）。
transition 過渡效果（比如說從一個ppt頁到另一頁的過渡方式的選擇，嗯，就是這個意思……）
向下移動的效果-示例代碼如下：
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 #d1 { 9 background-color: pink; 10 height: 200px; 11 width: 1300px; 12 position: relative; 13 border: 2px solid red; 14 overflow: hidden; 15 } 16 #d1 #img { 17 position: absolute; 18 left: -100px; 19 /*第一個參數是要過渡的樣式 20 第二個參數是要過渡的時間 21 第三個參數是過渡的方式（線性的，平滑的還有各種的） 22 第四個參數是開始這種過渡的時間*/ 23 transition:transform 5s linear 0s; 24 } 25 #d1:hover #img { 26 transform:translateX(1200px);/*延x軸移動1200px，只是有了移動的樣式，並不能看見移動的過程，想要看見移動的過程需要配合transition一起使用*/ 27 } 28 29 30 #d2 { 31 background-color: pink; 32 border: 2px solid red; 33 width: 55px; 34 height: 200px; 35 position: relative; 36 overflow: hidden; 37 } 38 #d2 #loz { 39 font-style: normal; 40 font: 600 100px/100px Consolas; 41 position: absolute; 42 top: -52px; 43 transition:transform 1s ease 0s; 44 } 45 /*鼠標懸浮在d2層上時做效果，對loz菱形做效果*/ 46 #d2:hover #loz { 47 /*還可以選取其他的效果*/ 48 transform: translateY(190px);/*延y軸移動190px，只是有了移動的樣式，並不能看見移動的過程，想要看見移動的過程需要配合transition一起使用*/ 49 } 50 </style> 51 </head> 52 <body> 53 <div id="d1"> 54 <i id="img"> 55 <img src="../img/boy1.jpg" /> 56 </i> 57 </div> 58 <br /> 59 <br /> 60 <div id="d2"> 61 <i id="loz">◊</i> 62 </div> 63 </body> 64 </html>
運行結果：
初始時（移動前）
移動過程中的樣子（我不能做一個gif或者小視頻放上來a，但是效果還是hin炫酷的！帥哥在移動，關鍵是鼠標移出后，他還會自己回去！哈哈哈哈哈，有做男朋友的潛質！！！）
