歡迎大家來訪問我的github哦：my-github

現把專案中學到的知識和遇到的問題做一整理。這篇是佈局篇（採用stylus）

flex佈局

• 如果一個佈局需要左邊是固定長度，右邊是自適應寬度，隨拉大而大，縮小而小，則可以使用flex佈局。移動端很適合。

.wrapper
     display: flex
     width: 100px
     .left
          flex: 0 0 20px    <!--固定寬度-->
     .right
          flex:1            <!--自適應-->

• 如果左右兩邊平分，則左右都是flex為1

        .wrapper
            display: flex
            width: 100px
            .left
              flex: 1    <!--固定寬度-->
            .right
              flex:1            <!--自適應-->
 

sticky-footer

sticky-footer就是如果頁面不夠長的時候，頁尾塊貼上在視窗底部，如果內容足夠長時，頁尾塊會被內容向下推送。

• html

<div class="detail-wrapper">
   <div class="detail-main">
     ....
   </div>
</div>
<div class="detail-close">
    <i class="icon-close"></i>
</div>

• stylus    
  

     給main包一個wrapper，是要設定最小高度100%，這樣當內容較少時下面的close也可以定在底部

     給main設定一個padding，是要給close留出位置，這樣當內容較多時close的內容不會遮擋住main的內容

     .detail-wrapper
        min-height: 100%
        .detail-main
          padding-bottom: 64px
      .detail-close
        position: relative
        width: 32px;
        height: 32px;
        margin: -64px auto 0 auto
        clear: both
        
 

多行文字垂直居中

• html

<ul>
   <li v-for="(item,index) in goods" class="menu-item" >
          <span class="text">
            ...
          </span>
    </li>
</ul>

• stylus

     .menu-item
        display: table
        height: 54px
        width: 56px
        padding: 0 12px
        line-height: 14px
        .text                  
         display: table-cell
          width: 56px
          vertical-align: middle

inline-block

兩個元素都設定為inline-block則可以實現兩個元素在同一行。但是兩個元素之間有空白符，這時只要在他們的父元素上設定字型大小為0則可以消除空白，注意要給兩個元素分別設定字型大小，否則就繼承父元素字型大小為0了。

.content-wrapper
      font-size: 0
      .avatar
        display: inline-block
        font-size:14px 
     .content
        display: inline-block
        font-size: 14px

white-space: nowrap     //不換行
overflow: hidden        //超過則隱藏
text-overflow: ellipsis     //超過則以...顯示

box-sizing

box-sizing型別中width包含的是內容+內邊距+邊框，在這種佈局的元素下的子元素繼承的width是內容的高度

 width: 56px
 height: 56px
 box-sizing: border-box

設定一個模糊的且置於文字下面的背景圖

z-index: -1
filter: blur(10px)

實現寬高相等的容器

width:100px
height:0
padding-top:100%