兩層div可以做什麼

其實應該說兩層的block物件可以做什麼,不過用div來代表比較好懂。

首先可以避開IE的box model的寬高問題,範例一中我內層的div標籤只有設定寬高,padding、border、margin的設定則是放在外層的的div,這樣便可以避開IE的問題,或著想要用IE的計算方式也是沒問題的,改成外層設定寬高和margin,內層設定border和padding,這樣現在可以確保兩種計算方法的結果都是一樣的。

Top Left Top Right Bottom Left Bottom Right

再來是可以配合背景圖片(如右側四張)、:before、:after兩個擬組件來做出圓角的效果,如範例二,這個作法的優點是長寬都是可以自由變化的。當然也可以加上邊框,如範例三,不知道要到何時border-radius才會被大量支援,所以現在要用圓角效果大概還是只能靠圖片了。

最後(我現在想到的)則是陰影效果,yDSF就是這樣,或是不想用圖片的話可以直接對內側物件設定relative position,見範例四