更新時間:2023-03-27 來源:黑馬程序員 瀏覽量:
其實浮動的本意是用來解決圖片和文字的排版問題,但是由于它十分好用,所以被大部分開發(fā)者應(yīng)用到了網(wǎng)頁布局中,并成為了公認(rèn)布局的一種方式。
接下來,我們通過一個demo演示一下浮動和定位在網(wǎng)頁布局中的使用,如demo1所示。
<!DOCTYPE html><html lang""en"> <head><meta charset="UTF-8"><title>浮動和定位</title></head><style type="text/css"> /*給類名為header、aside、main、footer的元素設(shè)置背景顏色和邊框*/ .header, .aside, .main, .footer { background-color:pink; /*背景色為粉色*/ border: lpx solid yellow; /·邊框為1px 的黃色實線*/ } , header { height: 100px; } .aside, .main { height: 200px; } .aside { width: 200px; float:left; /*類名為aside的元素左浮動*/ } .main { margin-left:202px; /*元素左邊距為202px*/ } .footer { height: 50px: } /*給類名為hpat-div的元素設(shè)置背景顏色、邊框、寬高及絕對定位*/ .float-div { background-color: paleturquoise; /*背景色為蒼白的寶石綠*/ border:lpx solid yellow; /·邊糕為lpx的黃色實線*/ width: 100px; height: 100px; position: absolute: /*絕對定位*/ top:160px; /*距父元素頂部邊線160px*/ left:500px; /*距父元素左邊線500px*/ } </style> <body> <header class="header">header</header> <aside class="aside">aside</aside> <section class="main">section</section> <footer class="footer">footer</footer> <div class="float-div">floatdiv</div> </body> </html>用瀏監(jiān)器打開demo1.頁面效果如圖。
在demo1中,使用浮動的知識對頁面進行了布局,也就是圖1-13中的header、aside、section、footer區(qū)域,然后使用絕對定位知識創(chuàng)建了一個浮動的div元素floatdiv。需要注意的是,position:absolute會導(dǎo)致元素脫離文檔流,被定位的元素等于在文檔中不占據(jù)任何位置,在另一個層呈現(xiàn)。float也會導(dǎo)致元素脫離文檔流,但還在文檔或容器中占據(jù)位置,把文檔流和其他float元素向左或向右擠,并可能導(dǎo)致?lián)Q行。