页面布局之三栏布局

三栏布局.png

布局分析：

第一：题面的要求当真是字面意义上这么简单吗？
第二：这道题的答案如何去写，技巧在哪里？
第三：如果我想向面试官证明我的实力和能力，这道题我能答出几种答案？

常见解决方案：

浮动和绝对定位、flex-box、网格布局、table-cell。

以下是五种解决方案的代码：

    
    
    



    
    

        
        
left
        
right
        

            
浮动中间位置
        
        

left

right

绝对定位解决方案

这是三栏布局绝对定位中间部分

flexbox布局

left

right

表格布局

left

right

网格布局

left

right

面试引申问题：

1.每个方案的优缺点：

浮动问题：

缺点：浮动之后会脱离文档流 清除浮动处理不好会出现很多问题
优点：兼容性比较好

绝对定位问题：

缺点：因为已经脱离文档流了 那么很多子元素也会脱离文档流 可使用性差
优点：便捷

flex问题：

优点：css3新出现的方式 它就是为了解决绝对定位和浮动不足 移动端基本用的是flex布局

表格布局问题：

优点：兼容性好（支持ie8) 当flex不支持时又想解决脱离文档流的时候
缺点：较为麻烦 操作繁琐 高度会统一 但有些场景不需要同时增高

网格布局：

新技术 通过网格布局可以做很多事情 代码量也少

2.高度去掉后哪个方案不能适用了

能正常使用的是flex布局和表格布局 其他三种布局不能用

以下是问题变通，大家可以运用上述几种方法尝试做一下

image.png