基础知识1--页面布局

页面布局

题：假设高度已知，请写出三栏布局，其中左栏右栏宽各位300px，中间自适应。
答: 7种方法
1.浮动 2.绝对定位 3.flex 4.table-cell 5.grid(网格布局) 6.圣杯布局 7.双飞翼布局。

• 公共样式

    *{
        margin:0;padding: 0;
    }
    .container{
        margin-top: 20px;
    }
    article > div {
        min-height: 100px;
    }
    .left,.right{
        background: red;
        width: 300px;
    }
    .center{
        background: #ccc;
    }
  

浮动

    
    

        
浮动解决方案
        
浮动解决方案
        
浮动解决方案
            
    

---

  

    
    

        
浮动两栏布局
        
浮动两栏布局
        

    

绝对定位

    
    
            
        
absolute布局
        

            absolute布局
        
  
        
absolute布局
                 
    

---

    
    

        
绝对定位两栏布局
        
绝对定位两栏布局
    

flex布局

    
    
            
        
flex布局
        

            flex布局
        
  
        
flex布局
                 
    

---

  

    
    

        
flex两栏布局
        
flex两栏布局
    

table-cell布局

    
    
           
        
table布局
        

            table布局
        
  
        
table布局
                    
    
  

---

    

    
    

        
table两栏布局
        
table两栏布局
    

grid布局

    
    
            
        
grid布局
        

            grid布局
        
  
        
grid布局
                 
    

---

  

    
    

        
grid两栏布局
        
grid两栏布局
    

圣杯布局

    
    

        
圣杯解决方案
 
        
圣杯解决方案
        
圣杯解决方案
                  
    

双飞翼布局

    
    

        

            
双飞翼布局
  
        
  
        
双飞翼布局
        
双飞翼布局
                   
    

• 优缺点

  • 浮动布局
    1.center只能放在最下面，而文档的渲染方式是由上而下的，通常center中的内容最重要，应该放在最上面，所以有了圣杯布局和双飞翼布局。
    2.浮动影响周围的元素，且脱离文档流，处理好浮动元素和周边元素的关系。
    3.不支持不定高列表的浮动。
    4.兼容性好

  • 绝对定位
    1.脱离文档流，子元素也脱离文档流，可适用性较差
    2.快

  • flex
    css3属性，移动端多用

  • table
    1.其中一个单元格高度超出，两侧的也会增高，有时候不需要
    2.一定要等到页面加载完成后才能渲染
    3.适用于表格

  • grid
    代码量少，新技术

  • 圣杯布局
    宽度太小，会变形

  • 双飞翼布局
    IE6+兼容性好

• 去掉高度，flex 和 table 可以用

语义化，不要通篇div

页面布局理解要深刻

css基础要扎实

思维灵活且积极上进（新技术要关注）

代码书写规范

如何让让一个不定宽高的DIV，垂直水平居中？

• css3 transform方法

公共样式

    
    
不确定宽高的div

• flex方法

    
    
不确定宽高的div

• table-cell方法

    
    
table-cell不确定宽高的div