浮動清楚浮動及position的用法
- 2019 年 10 月 4 日
- 筆記
float
在 CSS 中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
關於浮動的兩個特點：
- 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
- 由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
三種取值
left：向左浮動
right：向右浮動
none：默認值，不浮動
clear
clear屬性規定元素的哪一側不允許其他浮動元素。
|
值 |
描述 |
|---|---|
|
left |
在左側不允許浮動元素。 |
|
right |
在右側不允許浮動元素。 |
|
both |
在左右兩側均不允許浮動元素。 |
|
none |
默認值。允許浮動元素出現在兩側。 |
|
inherit |
規定應該從父元素繼承 clear 屬性的值。 |
注意：clear屬性只會對自身起作用，而不會影響其他元素。
清除浮動
清除浮動的副作用（父標籤塌陷問題）
主要有三種方式：
- 固定高度
- 偽元素清除法
- overflow:hidden
偽元素清除法（使用較多）：
.clearfix:after { content: ""; display: block; clear: both; }
overflow溢出屬性
|
值 |
描述 |
|---|---|
|
visible |
默認值。內容不會被修剪，會呈現在元素框之外。 |
|
hidden |
內容會被修剪，並且其餘內容是不可見的。 |
|
scroll |
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。 |
|
auto |
如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。 |
|
inherit |
規定應該從父元素繼承 overflow 屬性的值。 |
- overflow（水平和垂直均設置）
- overflow-x（設置水平方向）
- overflow-y（設置垂直方向）
圓形頭像示例
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圓形的頭像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { max-width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html>
定位（position）
static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標籤對象的left、top等值是不起作用的的。
relative（相對定位）
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還佔有著原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute（絕對定位）
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
fixed（固定）
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是「定位流」。但是 relative 卻可以。因為它原本所佔的空間仍然佔據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
示例程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>返回頂部示例</title> <style> * { margin: 0; } .d1 { height: 1000px; background-color: #eeee; } .scrollTop { background-color: darkgrey; padding: 10px; text-align: center; position: fixed; right: 10px; bottom: 20px; } </style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回頂部</div> </body> </html>
z-index
#i2 { z-index: 999; }
設置對象的層疊順序。
- z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定義模態框</title> <style> .cover { background-color: rgba(0,0,0,0.65); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; } .modal { background-color: white; position: fixed; width: 600px; height: 400px; left: 50%; top: 50%; margin: -200px 0 0 -300px; z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html>
opacity
用來定義透明效果。取值範圍是0~1，0是完全透明，1是完全不透明。
綜合示例
頂部導航菜單
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>li標籤的float示例</title> <style> /*清除瀏覽器默認外邊距和內填充*/ * { margin: 0; padding: 0; } a { text-decoration: none; /*去除a標籤默認的下劃線*/ } .nav { background-color: black; height: 40px; width: 100%; position: fixed; top: 0; } ul { list-style-type: none; /*刪除列表默認的圓點樣式*/ margin: 0; /*刪除列表默認的外邊距*/ padding: 0; /*刪除列表默認的內填充*/ } /*li元素向左浮動*/ li { float: left; } li > a { display: block; /*讓鏈接顯示為塊級標籤*/ padding: 0 15px; /*設置左右各15像素的填充*/ color: #b0b0b0; /*設置字體顏色*/ line-height: 40px; /*設置行高*/ } /*滑鼠移上去顏色變白*/ li > a:hover { color: #fff; } /*清除浮動 解決父級塌陷問題*/ .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 頂部導航欄 開始 --> <div class="nav"> <ul class="clearfix"> <li><a href="">玉米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">ioT</a></li> <li><a href="">雲服務</a></li> <li><a href="">水滴</a></li> <li><a href="">金融</a></li> <li><a href="">優品</a></li> </ul> </div> <!-- 頂部導航欄 結束 --> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>li標籤的float示例</title> <style> /*清除瀏覽器默認外邊距和內填充*/ * { margin: 0; padding: 0; } a { text-decoration: none; /*去除a標籤默認的下劃線*/ } .nav { background-color: black; height: 40px; width: 100%; position: fixed; top: 0; } ul { list-style-type: none; /*刪除列表默認的圓點樣式*/ margin: 0; /*刪除列表默認的外邊距*/ padding: 0; /*刪除列表默認的內填充*/ } /*li元素向左浮動*/ li { float: left; } li > a { display: block; /*讓鏈接顯示為塊級標籤*/ padding: 0 15px; /*設置左右各15像素的填充*/ color: #b0b0b0; /*設置字體顏色*/ line-height: 40px; /*設置行高*/ } /*滑鼠移上去顏色變白*/ li > a:hover { color: #fff; } /*清除浮動 解決父級塌陷問題*/ .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 頂部導航欄 開始 --> <div class="nav"> <ul class="clearfix"> <li><a href="">玉米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">ioT</a></li> <li><a href="">雲服務</a></li> <li><a href="">水滴</a></li> <li><a href="">金融</a></li> <li><a href="">優品</a></li> </ul> </div> <!-- 頂部導航欄 結束 --> </body> </html
