Day50:CSS屬性(float、position)
一、float屬性
1、基本屬性
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊,獨占一行,多個block元素會各自新起一行,默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性;
inline元素不會獨占一行,多個相鄰的行內元素會排列在同一行裏,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化。inline元素設置width、height屬性無效
- 常見的塊級元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流,指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。
脫離文檔流,也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文檔流的元素不存在而進行定位。
假如某個div元素A是浮動的,如果A元素上一個元素也是浮動的,那麽A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素,那麽A元素會被擠到下一行);如果A元素上一個元素是標準流中的元素,那麽A的相對垂直位置不會改變,也就是說A的頂部總是和上一個元素的底部對齊。此外,浮動的框之後的block元素元素會認為這個框不存在,但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素,會為這個框空出位置,然後按順序排列。
示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; floatView Code: left; } .r2{ width: 200px; height: 200px; background-color: wheat; /*float: left;*/ } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
2、非完全脫離文檔流
左右結構div盒子重疊現象,一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上,但內容不會造成覆蓋現象,只有DIV形成覆蓋現象。
註意:處於文檔流的文本不會被懸浮的DIV覆蓋,會被擠出來顯示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 100px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="r1"></div> <div class="r2">region2</div> </body> </html>View Code
>>>>解決不覆蓋的方法:要麽都不使用浮動;要麽都使用float浮動;要麽對沒有使用float浮動的DIV設置margin樣式。
3、父級塌陷現象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </body> </html>View Code
例子如上:.container和box3的布局是上下結構,上圖發現box3跑到了上面,與.container產生了重疊,但文本內容沒有發生覆蓋,只有div發生覆蓋現象。這個原因是因為第一個大盒子裏的子元素使用了浮動,脫離了文檔流,導致.container沒有被撐開。box3認為.container沒有高度(未被撐開),因此跑上去了。
>>>>解決方法:
1.固定高度
給.container設置固定高度,一般情況下文字內容不確定多少就不能設置固定高度,所以一般不能設置“.container”高度(當然能確定內容多高,這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
或者給.container加一個固定高度的子div:
<div class="container">
<div id="box1">box1 向左浮動</div>
<div id="box2">box2 向右浮動</div>
<div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>
但是這樣限定固定高度會使頁面操作不靈活,不推薦!
2.清除浮動(推薦)
clear語法:
clear : none | left | right | both
取值:
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要註意的是:clear屬性只會對自身起作用,而不會影響其他元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: left; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>View Code
把握住兩點:
1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用,一旦左邊有浮動元素,即切換到下一行來保證左邊元素不是浮動的,依據這一點解決父級塌陷問題。
解決父級塌陷:
‘‘‘ .clearfix:after { <----在類名為“clearfix”的元素內最後面加入內容; content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。 display: block; <----加入的這個元素轉換為塊級元素。 clear: both; <----清除左右兩邊浮動。 visibility: hidden; <----可見度設為隱藏。註意它和display:none;是有區別的。 visibility:hidden;仍然占據空間,只是看不到而已; line-height: 0; <----行高為0; height: 0; <----高度為0; font-size:0; <----字體大小為0; } .clearfix { *zoom:1;} <----這是針對於IE6的,因為IE6不支持:after偽類,這個神 奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。 整段代碼就相當於在浮動元素後面跟了個寬高為0的空div,然後設定它clear:both來達到清除浮動的效果。 之所以用它,是因為,你不必在html文件中寫入大量無意義的空標簽,又能清除浮動。 <div class="head clearfix"></div> ‘‘‘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .clearfix:after{ content: ""; display: block; clear: both; visibility: hidden; } .container{ border:1px solid red;width:300px; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container clearfix"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </html>View Code
3.overflow:hidden
overflow:hidden的含義是超出的部分要裁切隱藏,float的元素雖然不在普通流中,但是他是浮動在普通流之上的,可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下,它要計算內容的全部高度才能確定在什麽位置hidden,這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開,清除浮動。
二、position(定位)
1、static
static 默認值,無定位,不能當作絕對定位的參照物。設置標簽對象的left、top等值是不起作用的的。
2 、position: relative / absolute
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屬性定義。
示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .outet{ /*position: relative;*/ } .item{ width: 200px; height:200px ; } .r1{ background-color: #7A77C8; } .r2{ background-color: wheat; /*position: relative;*/ position: absolute; top: 200px; left: 200px; } .r3{ background-color: darkgreen; } </style> </head> <body> <div class="item r1"></div> <div class="outet"> <div class="item r2"></div> <div class="item r3"></div> </div> </body> </html>View Code
總結:參照物用相對定位,子元素用絕對定位,並且保證相對定位參照物不會偏移即可。
3、position:fixed
fixed:對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現滾動條時,對象不會隨著滾動。而其層疊通過z-index屬性 定義。 註意點: 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點,因為這是兩個不同的流,一個是浮動流,另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上,被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。
示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .back{ background-color: wheat; width: 100%; height: 1200px; } span{ display: inline-block; width: 80px; height: 50px; position: fixed; bottom: 20px; right: 20px; background-color: rebeccapurple; color: white; text-align: center; line-height: 50px; } </style> </head> <body> <div class="back"> <span>返回頂部</span> </div> </body> </html>View Code
三、課後作業
Day50:CSS屬性(float、position)