歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
咨詢(xún)服務(wù)熱線(xiàn)：400-099-8848
CSS分欄布局的辦法:必定定位和起浮 |
| 發(fā)布時(shí)間：2024-07-16 文章來(lái)源：本站 瀏覽次數(shù)：1016 |
在CSS中，完成分欄布局有兩種辦法。第一種辦法是運(yùn)用四種CSS定位選項(xiàng)中的必定定位（absolute positioning），它能夠?qū)⑽臋n中的某個(gè)元素從其本來(lái)方位上移除，并重新定位在希望的任何地址之上。第二種則是運(yùn)用CSS中的起�。╢loat）概念。
必定定位或起浮都能夠用來(lái)完成分欄作用。二者能夠獨(dú)立運(yùn)用，也能夠結(jié)合在一起，相輔相成。
1、必定定位
必定定位的優(yōu)勢(shì)在于，咱們能夠絲毫不差地精確控制任何元素的方位—這里面沒(méi)有什么需求猜測(cè)或許命運(yùn)的成分。由于應(yīng)用了必定定位的元素被不留痕跡地從慣例文檔流中完全移除，所以它也不會(huì)為其他元素帶來(lái)任何的影響。
那么讓咱們?cè)囈辉囉帽囟ǘㄎ辉趺赐瓿上旅娴牟季帧?/div>
這是一個(gè)三欄的布局，并且是居中顯現(xiàn)的。其間，A欄是主體內(nèi)容欄，B欄和C欄都是側(cè)邊欄。首先，咱們不可能直接用必定定位將A、B、C三欄定位到居中的方位，由于每個(gè)人顯現(xiàn)器的分辨率是不同的，在1024X768分辨率的顯現(xiàn)器上定位的居中作用，在別的分辨率的顯現(xiàn)器上看到的作用必定不會(huì)是居中顯現(xiàn)的，那么，該怎么處理這個(gè)問(wèn)題呢？
幸好，在必定定位模型中有個(gè)極為有用的特性，那就是：若某個(gè)必定定位元素的容器也被定位過(guò)，那么該元素指定的top和left值將不會(huì)依據(jù)文檔的根元素html（也就是瀏覽器窗口的左上角）核算，而是會(huì)依據(jù)其容器的左上角核算這個(gè)偏移量。換句話(huà)說(shuō)，也就是：被定位過(guò)的容器將扮演其間一切元素必定定位起始點(diǎn)的角色。
所以，運(yùn)用這個(gè)特性，咱們給A、B、C欄的外部加上一個(gè)容器D，如下圖：
然后，咱們讓容器D居中，并給它加上一個(gè)特點(diǎn)：position:relative，這樣，再用必定定位定位A、B、C的top和left值，A、B、C的方位就會(huì)依據(jù)容器D的左上角的方位來(lái)核算了，這樣就能夠完成咱們希望的三欄居中的作用了。
可是，咱們常用的布局并沒(méi)有這么簡(jiǎn)略，除了三欄之外，咱們還需求一個(gè)頁(yè)頭和一個(gè)頁(yè)腳，如下圖：
這時(shí)候，再用必定定位布局就行不通了，由于必定定位的元素會(huì)從文檔流中完全移除，這時(shí)，頁(yè)腳會(huì)緊挨著頁(yè)頭，顯現(xiàn)在頁(yè)頭的下方。
如果咱們一定要選用必定定位的話(huà)，那么有必要預(yù)先知道這三欄中每一欄的高度，然后再依據(jù)其間高的一欄定位頁(yè)腳。若是任意一欄中的文本長(zhǎng)度無(wú)法確定的話(huà)，除了運(yùn)用JavaScript，咱們也只能放棄必定定位的想法，轉(zhuǎn)而投入到起浮布局的懷有。
2、起浮
起浮的本意是要將插入到文章中的圖片向左或許向右起浮，使圖片下方的文字自動(dòng)環(huán)繞在它的周?chē)箞D片的左邊或許右邊不會(huì)出現(xiàn)一大塊的留白。
起浮的語(yǔ)法雖然簡(jiǎn)略，但卻不那么容易把握，下面讓咱們舉例闡明怎么用起浮來(lái)進(jìn)行布局。相同，咱們要完成一個(gè)帶頁(yè)腳的三欄布局。如下圖：
怎么用起浮完成這樣的作用呢？其實(shí)很簡(jiǎn)略：
1、設(shè)定E的寬度，讓E居中
2、設(shè)定A、B、C的寬度，將A、B、C分別向左起浮
3、給頁(yè)腳設(shè)置clear特點(diǎn)
需求闡明的是，起浮布局仍然遵從慣例文檔流，所以與必定定位比較，起浮定位時(shí)HTML源文件中元素聲明的方位顯得分外重要。 當(dāng)然，處理這個(gè)問(wèn)題的簡(jiǎn)略的辦法就是在源文件中交換左欄和右欄的聲明次第，也有辦法不必交換各欄的次第也能夠完成相同的布局，可是，這就要用到一種比較不流暢的運(yùn)用負(fù)邊距值的辦法。一般情況下，人們十有八九會(huì)選擇交換源文件中左中兩欄的聲明次第。 |
|
