结合他人经验以及自己学习过程中遇到的问题，将知识点整理如下。

这篇是布局篇（采用stylus）

flex布局

• 如果一个布局需要左边是固定长度，右边是自适应宽度，随拉大而大，缩小而小，则可以使用flex布局。移动端很适合。

.wrapper      
           
     
         
           
           
          
           
                  
       display:        
       flex      
           
     
         
           
           
          
           
                  
       width: 100       
       px      
           
     
         
           
           
          
           
                  
       .left      
           
     
         
           
           
          
           
                       
       flex: 0 0 20       
       px    
           
           
     
         
           
           
          
           
                  
       .right      
           
     
         
           
           
          
           
                       
       flex       
       :1            
     

• 如果左右两边平分，则左右都是flex为1

.wrapper      
           
     
         
           
           
          
           
                         
       display:        
       flex      
           
     
         
           
           
          
           
                         
       width: 100       
       px      
           
     
         
           
           
          
           
                         
       .left      
           
     
         
           
           
          
           
                           
       flex: 1    
           
           
     
         
           
           
          
           
                         
       .right      
           
     
         
           
           
          
           
                           
       flex       
       :1            
     

sticky-footer

sticky-footer就是如果页面不够长的时候，页脚块粘贴在视窗底部，如果内容足够长时，页脚块会被内容向下推送。

• html

     
      
           
     
         
           
           
          
           
                
       
      
             
           
     
         
           
           
          
           
      
                   ....      
           
     
         
           
           
          
           
                
       
      
      
           
     
         
           
           
          
           
             
       
     
      
           
     
         
           
           
          
           
             
       
     
      
           
     
         
           
           
          
           
                 
       
             
             
           
     
         
           
           
          
           
             
       
     

• stylus    

     给main包一个wrapper，是要设置最小高度100%，这样当内容较少时下面的close也可以定在底部

     给main设置一个padding，是要给close留出位置，这样当内容较多时close的内容不会遮挡住main的内容

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

多行文字垂直居中

• html

     
      
           
     
         
           
           
          
           
                
       
      
      
           
     
         
           
           
          
           
                       
             
           
     
         
           
           
          
           
      
                          ...      
           
     
         
           
           
          
           
                       
             
           
     
         
           
           
          
           
                 
       
      
           
     
         
           
           
          
           
             
       
     

• stylus

.menu-item      
           
     
         
           
           
          
           
                     
       display:        
       table      
           
     
         
           
           
          
           
                     
       height: 54       
       px      
           
     
         
           
           
          
           
                     
       width: 56       
       px      
           
     
         
           
           
          
           
                     
       padding: 0 12       
       px      
           
     
         
           
           
          
           
                     
       line-height: 14       
       px      
           
     
         
           
           
          
           
                     
       .text                        
           
     
         
           
           
          
           
                      
               
       display:        
       table-cell      
           
     
         
           
           
          
           
                       
       width: 56       
       px      
           
     
         
           
           
          
           
                       
       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: 14       
       px

超出文字以…显示

white-space:        
       nowrap     //不换行      
           
     
         
           
           
          
           
             
       overflow:        
       hidden        //超过则隐藏      
           
     
         
           
           
          
           
             
       text-overflow:        
       ellipsis     //超过则以...显示

注：此时不能设置font-size为0

box-sizing

box-sizing类型中width包含的是内容+内边距+边框，在这种布局的元素下的子元素继承的width是内容的高度

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

模糊

设置一个模糊的且置于文字下面的背景图

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

实现宽高相等的容器

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