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

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

一、流式布局

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

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

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

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

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

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

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

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

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

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真實(shí)寬度350+70 = 420px;
p真實(shí)高度80px+70px = 150px;

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

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