【知识梳理】3.1页面布局

题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。

---

0.基础样式

1.浮动布局

    

        
        

            

            

            

                
浮动解决方案
                1.这是三栏布局的中间部分
                2.这是三栏布局的中间部分
                3.这是三栏布局的中间部分
                4.这是三栏布局的中间部分
                5.这是三栏布局的中间部分
                6.这是三栏布局的中间部分
            
        
    

2.绝对布局

    

        
        

            

            

                
绝对定位解决方案
                1.这是三栏布局的中间部分
                2.这是三栏布局的中间部分
                3.这是三栏布局的中间部分
                4.这是三栏布局的中间部分
                5.这是三栏布局的中间部分
                6.这是三栏布局的中间部分
            
            

        
    

3.flexbox布局

    

        
        

            

            

                
flexbox解决方案
                1.这是三栏布局的中间部分
                2.这是三栏布局的中间部分
                3.这是三栏布局的中间部分
                4.这是三栏布局的中间部分
                5.这是三栏布局的中间部分
                6.这是三栏布局的中间部分
            
            

        
        
    

4.表格布局

    

        
        

            

            

                
表格布局解决方案
                1.这是三栏布局的中间部分
                2.这是三栏布局的中间部分
                3.这是三栏布局的中间部分
                4.这是三栏布局的中间部分
                5.这是三栏布局的中间部分
                6.这是三栏布局的中间部分
            
            

        
    

5.网格布局

    

        
        
        

            

            

                
网格布局解决方案
                1.这是三栏布局的中间部分
                2.这是三栏布局的中间部分
                3.这是三栏布局的中间部分
                4.这是三栏布局的中间部分
                5.这是三栏布局的中间部分
                6.这是三栏布局的中间部分
            
            

        
    

6.延伸

1.五种方案优缺点？

• 浮动：脱离文档流，常见问题在于清除浮动，优点是兼容性比较好；
• 绝对定位：优点是快捷，缺点是布局脱离文档流，那么其子元素也要脱离文档流，导致有效性（可使用性）比较差；
• flexbox:css3中新出现的解决方式，可解决前两个方案的不足，是比较完美的,不兼容ie8，在现代移动端，基本使用flex布局；
• table:历史上说起麻烦，操作繁琐，对seo不友好，当某一个单元格高度变化时，其余表格跟着调整高度，但有的场景不需要；优点：兼容性非常好，pc可兼容ie8；
• grid:新技术，960宽，12列，代码简单；

2.假设高度不确定，根据中间文字自适应，哪个适用？

• 不能用：浮动，绝对定位，grid
• 能用：flexbox，table

3.5种方案的兼容性如何？最优方案是哪个？
4.延伸

• 三栏式布局： 1.左右宽度固定，中间自适应; 2.上下高度固定，中间自适应;栗子
• 两栏式布局： 1.左宽度固定，右自适应;栗子 2.右宽度固定，左自适应; 3.上宽度固定，下自适应; 4.下宽度固定，上自适应;

7.示例

• 三栏式布局的5种方案

• 页面宽度变小时

• 文字内容将高度撑开