|
到目前為了還沒有看出什么效果來。
值得一提的是，雖然我們設(shè)置了display:box模型，它的子元素會占據(jù)整個(gè)垂直空間。這就是它的默認(rèn)box-align屬性stretch。
看看有什么效果產(chǎn)生，當(dāng)我們設(shè)置了#main的寬度后。
#main {
background: yellow;
width: 800px;
}
但是我們?nèi)杂袀�(gè)疑問，為什么aside不占據(jù)剩余的全部空間呢？我們可以用新屬性box-flex來試下。
box-flex 使得元素占據(jù)整個(gè)空間。
aside {
display: block; /* cause is HTML5 element */
background: red;
/* take up all available space */
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
使用這個(gè)屬性后，不管#main有多寬，aside都將占據(jù)整個(gè)可用的空間。同時(shí)你也不必?fù)?dān)心諸如float等產(chǎn)生的問題，像使得元素被排擠到下一行。
演示
我只是在這兒膚淺的說一下，請參閱保羅愛爾蘭優(yōu)秀文章的詳細(xì)信息。然而，使用此方法的時(shí)候也應(yīng)注意一下兼容問題，例如老的瀏覽器應(yīng)該先測試下，并且提供必要的備注。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 你需要熟知10個(gè)的CSS3屬性 [7] 下一頁 你需要熟知10個(gè)的CSS3屬性 [9]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 你需要熟知10個(gè)的CSS3屬性 [8]
