教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

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

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

一、流式布局

手機(jī)網(wǎng)站一般沒(méi)有版心，這是因?yàn)槭謾C(jī)的屏幕已經(jīng)很小了，寸土寸金。
流式布局：盒子的width、padding、margin用百分比的形式來(lái)進(jìn)行定義。
 
如果一個(gè)盒子，沒(méi)有其他父元素（body標(biāo)簽是它的父標(biāo)簽）的時(shí)候，這個(gè)盒子如果用百分比來(lái)指定寬度，就是相對(duì)于瀏覽器窗口的寬度。
  1. <body>
  2. <div></div>
  3. </body>
 
如果一個(gè)盒子，有父標(biāo)簽（不是body），這個(gè)盒子如果用百分比來(lái)指定寬度，就是相對(duì)于父盒子的width值。
  1. <div>
  2. <p></p>
  3. </div>
 
如果一個(gè)盒子，自己有用百分比寫(xiě)的padding、margin，那么都是相對(duì)于父盒子的width值。
  1. <div>
  2. <p>祝大家圣誕節(jié)快樂(lè)！</p>  → 這個(gè)盒子有padding-left:10%; 相對(duì)于父盒子的width值
  3. </div>
 
 
padding-top、padding-bottom雖然是豎直方向上的內(nèi)邊距，但是仍然參考的是父盒子的width。
這個(gè)性質(zhì)非常有用，一會(huì)兒我們將看到這個(gè)性質(zhì)可以用來(lái)解決盒子的高度等比例變化的問(wèn)題。

【階段小測(cè)試】看下面的代碼，結(jié)構(gòu)是 <div><p>祝大家圣誕節(jié)快樂(lè)！</p></div>，你能說(shuō)出現(xiàn)在p標(biāo)簽真實(shí)的寬度，和高度是多少么？
  1. div{
  2. width: 700px;
  3. height: 100px;
  4. margin: 100px auto;
  5.             padding-left: 100px;
  6. background-color: orange;
  7. }
  8. div p{
  9. width: 50%;   /*350px*/
  10. padding-left: 10%;  /*70px*/
  11. padding-top: 10%;  /*70px*/
  12. height: 80px;
  13. background-color: green;
  14. }
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://m.8y3kgpwe.cn/ui 
0 分享到：
和我們?cè)诰€交談！