|
CSS 定位機制CSS 有三種基本的定位機制：普通流,、浮動和絕對定位,。
一、普通流
二,、定位 ?。薄⑾鄬Χㄎ?/span>  <html> <head> <style type="text/css"> .box1{ background-color: red; width:100px; height:100px; } .box2{ background-color: yellow; width:100px; height:100px; position: relative; left: 20px; } .box3{ background-color: blue; width:100px; height:100px; position: relative; right: 20px; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html> 效果如下圖所示：
<!doctype html> <html> <head> <meta charset="utf-8"> <style> *{margin: 0; padding: 0;} #div1 { width: 200px; height: 200px; background: yellow; } #div2 { width: 50%; height: 50%; background: red; top: 100px; left: 100px; position: absolute; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html> 效果如下圖所示： 備注：相對于已相對定位的祖先元素對框進(jìn)行絕對定位，在大多數(shù)現(xiàn)代瀏覽器中都可以實現(xiàn)的很好,。
三、浮動 可參考CSS float 屬性 請看下圖,，當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動,，直到它的右邊緣碰到包含框的右邊緣： 再請看下圖,，當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動,，直到它的左邊緣碰到包含框的左邊緣,。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2,，使框 2 從視圖中消失,。 如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框,，另外兩個框向左浮動直到碰到前一個浮動框,。
如下圖所示，如果包含框太窄,，無法容納水平排列的三個浮動元素,，那么其它浮動塊向下移動，直到有足夠的空間,。如果浮動元素的高度不同,，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”：
清除浮動簡單介紹下清除浮動的2中方法。 方法一：結(jié)合:after選擇器清除浮動,。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { border: 1px solid red; background-color: yellow; } .clear:after { content: "." ; display: block; height: 0; visibility: hidden; clear: both; } .box2 { width: 50px; height: 50px; float: left; background-color: orange; } p { float: right; } </style> </head> <body> <div class="box1 clear"> <div class="box2"> box2 </div> <p> lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 </p> </div> </body> </html>  方法二,，在容器最后添加一個空元素并且清理它。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { border: 1px solid red; background-color: yellow; } .empty{ clear: both; } .box2 { width: 50px; height: 50px; float: left; background-color: orange; } p { float: right; } </style> </head> <body> <div class="box1 clear"> <div class="box2"> box2 </div> <p> lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 </p> <br class="empty" /> </div> </body> </html>
效果均如下所示：
附錄： CSS position 屬性總結(jié)：所有主流瀏覽器都支持 position 屬性,。position屬性規(guī)定元素的定位類型,，影響元素框生成的方式。 可能的值
CSS 定位屬性CSS 定位屬性允許你對元素進(jìn)行定位,。
|
|
|
