div+css排版

最新推荐文章于 2023-03-25 17:26:45 发布

转载最新推荐文章于 2023-03-25 17:26:45 发布 · 1k 阅读

文章标签：

#CSS #布局

java 专栏收录该内容

22 篇文章

订阅专栏

上次有說到學程序語言就跟學外語一樣，拼命看、死命看就能看懂，這絕對不是說笑，俺就是這麼自學出來的~
不過這樣學需要很長時間的累積，和無限的愛就是了。
這次要說的是利用div+CSS來進行網頁的排版，好處多多就不一一重複了。
對於一直以來都是利用HTML+table來排版的人，突然要使用div可能會很不適應，
這次我希望通過我所理解的div的解釋，好讓用慣table的同學更簡單的理解什麼是div。

例如我們要做一個非常普遍的「帶標題的三欄式」佈局：

一直以來，我們是按照三欄式的布局，建立一個同樣佈局的表格（table），然後設置它的邊框距離等，再把內容填入就可以了。
如果我們現在要使用div+CSS來布局的話，需要建立ABCD各一個div，然後再設置每個div的CSS樣式，將其排布成我們所要的布局。
咋一看下來div+CSS會複雜很多，但一旦佈局完成，之後的動作將會非常簡單：
1，css因為可以共用，因此ABCD框內的邊框、距離等樣式都可以共享，隨時調用。
2，這4個框的所在位置可以隨時調整，也可以上下重疊（我現在的skin，中間部分就是z-index:1，它浮在其他所有div之上）
3，兼容性高。
4，table用多了會出現謎之寬度、高度不能控制的問題，div無論疊幾個上去都不會亂跑。（FP後遺症，table實在是太不聽話了）
table和div最大的不同在於，
table它強調「嵌套」，一個表格套一個表格；
div則更注重「層疊」，一個div疊在另一個div之上。
寫作的時候記住他們的區別，便會容易理解很多。
在寫HTML的時候，table的先後順序非常重要，然而div則完全不必考慮順序，只經由CSS來定義。
我們來看一下這個佈局用div+CSS最簡單的寫法：
HTML部分：

<div id=”A”>A框內的內容</div>
<div id=”B”>B框內的內容</div>
<div id=”C”>C框內的內容</div>
<div id=”D”>D框內的內容</div>

HTML是不是比用table寫要簡單清晰的多呢？
順便一提，這4個ABCD的div寫作順序可以顛倒喔。
（我通常會將C框寫在最上面，這樣當頁面內容很多時，我們可以指定瀏覽器先讀取最重要的C框，然後再讀取ABD框）
接下來來看CSS。
CSS部分：

#A { height:100px } /* 僅設定A框的高度 */
#B { position: absolute; left: 0px; top:100px; width:300px; } /* 設定B框固定在瀏覽器最左邊 */
#C { margin: 0px 300px 0px 300px; } /* 設定C框左右兩邊各空出300px */
#D { position: absolute; right: 0px; top:100px; width:300px; } /* 設定D框固定在瀏覽器最右邊 */

這樣就可以輕鬆寫出我們想要的布局了。這個佈局會自適應各個頁面寬度，中間的C框會根據瀏覽器寬度而自動被拉長。
這裏還有更多實用的布局可以參考：
Nice and Free CSS Templates

舉個CSS控制佈局更輕鬆的例子：
例如我們覺得左右邊欄（B框和D框）的寬度不夠，想要將300px變為400px時，只需將CSS代碼裏的300px都統一改為400px就可以了。
根本不需要動到HTML部分~
又例如我們不想要右邊欄（D框）了，那麼只需將HTML部分和CSS部分裏的D框語法刪除，
然後將CSS部分內，C框的margin右側數值也改為0px，就可以實現了。
比起用table改寫，div+CSS會清晰簡單很多~

至於常用的margin和padding屬性，它們和table的邊框屬性是比較相似的，因此這裏就不再敘述了~
畫個簡單的圖說明它們各是啥：