使用CSS布局網(wǎng)頁(yè)，那是前端的基本功了，什么兩欄布局，三欄布局，那也是前端面試的基本題了。一般來(lái)說(shuō)，可以使用CSSposition屬性進(jìn)行布局，或者使用CSSfloat屬性布局。前者適合布局首頁(yè)，因?yàn)槭醉?yè)上的內(nèi)容往往可以完全控制。后者適合布局模板，模板中填充的內(nèi)容你沒(méi)法控制——比如，在編輯wordpress模板時(shí)，你肯定沒(méi)法考慮每篇博文的長(zhǎng)度。這篇博文，就是總結(jié)一下怎樣使用CSS中的float屬性進(jìn)行布局，其實(shí)網(wǎng)上有很多討論這個(gè)話題的文章了，但我覺(jué)得都沒(méi)說(shuō)到點(diǎn)子上。那就來(lái)老生常談一次吧，CSS之Float布局。
DIV的特點(diǎn)
布局的基本HTML元素div，有這么幾個(gè)特點(diǎn)，會(huì)影響到后面進(jìn)行的布局。注意，下面的特點(diǎn)僅適用于沒(méi)有指定width屬性和height屬性的div，因?yàn)樵谟胒loat進(jìn)行布局的過(guò)程中，我們只有在特定的位置（后面會(huì)詳述）才這么做。
•空的div是沒(méi)有高度的。
•有內(nèi)容的div其高度取決于內(nèi)容的高度。
•如果沒(méi)有指定float屬性，div的寬度將和占滿父元素的寬度（不管是不是空的）。
•如果指定了float屬性，div的寬度將取決于內(nèi)部元素的寬度（所以，空的div指定了float屬性后既沒(méi)有高度也沒(méi)有寬度）。
網(wǎng)上的很多教程，經(jīng)常指定了div的寬度或高度，然后講解float屬性，這對(duì)我學(xué)習(xí)布局確實(shí)產(chǎn)生了很大干擾。記住，只有在特定的位置，我們才會(huì)指定div的寬度。
Float布局的過(guò)程
在實(shí)踐過(guò)程中，我領(lǐng)悟到一點(diǎn)，那就是，div是按照在HTML文檔中的順序進(jìn)行渲染的。也就是說(shuō)，我們先決定前一個(gè)div在頁(yè)面上的位置，然后再?zèng)Q定后一個(gè)div的位置。也許這一點(diǎn)是顯而易見(jiàn)的，但它確實(shí)是理解Float布局的關(guān)鍵，網(wǎng)上其他教程里很少有提及。
有下面這樣的HTML文檔
復(fù)制代碼代碼如下:
<!DOCTYPE>
<html>
<head>
<style type=”text/css”>
#header{background-color: gray;}
#content{background-color: red;}
#sidebar{background-color: blue;}
#sidebar2{background-color: green;}
#footer{background-color: yellow;}
</style>
</head>
<body>
<div id=”page”>
<div id=”header”><h1>這里是標(biāo)題</h1></div>
<div id=”sidebar”>
<p>側(cè)邊欄</p>
</div>
<div id=”sidebar2″>
<p>側(cè)邊欄2：地圖投影，是將地球表面投影到地圖平面的過(guò)程，將地理坐標(biāo)轉(zhuǎn)換為平面直角坐
標(biāo)的過(guò)程。因?yàn)楫厴I(yè)論文需要，我重新回顧了一下地圖投影的知識(shí)并且作了比較全面且簡(jiǎn)潔的總
新聞熱點(diǎn)
疑難解答
圖片精選
