ui培訓(xùn)之流式布局彈性盒模型(一)

更新時間:2016年05月06日15時25分來源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

一、流式布局

手機(jī)網(wǎng)站一般沒有版心，這是因為手機(jī)的屏幕已經(jīng)很小了，寸土寸金。
流式布局：盒子的width、padding、margin用百分比的形式來進(jìn)行定義。

如果一個盒子，沒有其他父元素（body標(biāo)簽是它的父標(biāo)簽）的時候，這個盒子如果用百分比來指定寬度，就是相對于瀏覽器窗口的寬度。

<body>
<div></div>
</body>

如果一個盒子，有父標(biāo)簽（不是body），這個盒子如果用百分比來指定寬度，就是相對于父盒子的width值。

<div>
<p></p>
</div>

如果一個盒子，自己有用百分比寫的padding、margin，那么都是相對于父盒子的width值。

<div>
<p>祝大家圣誕節(jié)快樂！</p> → 這個盒子有padding-left:10%; 相對于父盒子的width值
</div>

padding-top、padding-bottom雖然是豎直方向上的內(nèi)邊距，但是仍然參考的是父盒子的width。
這個性質(zhì)非常有用，一會兒我們將看到這個性質(zhì)可以用來解決盒子的高度等比例變化的問題。

【階段小測試】看下面的代碼，結(jié)構(gòu)是 <div><p>祝大家圣誕節(jié)快樂！</p></div>，你能說出現(xiàn)在p標(biāo)簽真實的寬度，和高度是多少么？

div{
width: 700px;
height: 100px;
margin: 100px auto;
padding-left: 100px;
background-color: orange;
}
div p{
width: 50%; /*350px*/
padding-left: 10%; /*70px*/
padding-top: 10%; /*70px*/
height: 80px;
background-color: green;
}

p真實寬度350+70 = 420px;
p真實高度80px+70px = 150px;

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui

上一篇：UI培訓(xùn)之彈性盒模型概念 下一篇：ui培訓(xùn)之流式布局彈性盒模型(二)