【前端面试】01 页面布局

拼搏现实的明天。 2021-10-25 14:12 303阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.问题
 *  2. 解决方法
 *   *  2.1 浮动
     *  2.2 定位
     *  2.3 flexbox布局
     *  2.4 表格布局
     *  2.5 网格布局
 *  3.延伸：5种方法对比
 *  4.总结

# 1.问题 #

**问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。**

方法：

*  浮动
 *  绝对定位
 *  flexbox
 *  表格table（已淘汰）
 *  网格布局grid（最新）

# 2. 解决方法 #

## 2.1 浮动 ##

*  思路：左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
 *  html：语义化标签，每个区域用section、article代表容器、div代表块儿。

<section class="layout float">
            
            <article class="left-right-center">
                
                <div class="left">
                    我是 left
                </div>
                <div class="right">
                    我是 right
                </div>
                <div class="center">
                    浮动解决方案
                    我是 center
                </div>
            </article>
        </section>

*  css关键代码：（省略了背景色和宽高等）

.layout.float .left { 
                float: left;
            }
    .layout.float .right { 
                float: right;
            }        
    .layout.float .center { }

## 2.2 定位 ##

*  左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。
 *  css关键代码：（省略了背景色和偏移距离等）

.layout.absolute .left-center-right { 
                position: relative;
            }
    .layout.absolute .left { 
                position: absolute;
            }
     .layout.absolute .center { 
                position: absolute;
            }
    .layout.absolute .right { 
                position: absolute;
            }

## 2.3 flexbox布局 ##

*  设置两侧的宽度后，然后让中间的flex = 1，即可。

.left-center-right { 
                display: flex;//父盒子设置flex布局
            }
     .layout.flex .center { 
                flex: 1;
            }

## 2.4 表格布局 ##

*  **设置整个容器的宽度为100%，设置三个部分均为表格**，然后左边的单元格宽度为 300px，右边的单元格宽度为 300px，即可。中间的单元格会自适应。

.layout.table .left-center-right { 
                width: 100%;
                display: table;
                }
      .layout.table .left-center-right div { 
                display: table-cell; 
            }

## 2.5 网格布局 ##

*  只需要设置容器（父盒子）为网格布局，宽度为100%；设置网格为3列，并设置宽高。
 *  父盒子完整代码

.layout.grid .left-center-right { 
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px; 
            }

# 3.延伸：5种方法对比 #

*  优缺点？
 *  考虑中间模块的高度问题
 *  兼容性问题：实际开发中，哪个最实用？

**优缺点**

1.浮动

*  兼容性好
 *  需要解决清除浮动的问题

2.绝对定位

*  快捷
 *  导致子元素脱离标准文档流，可实用性差

3.flex布局（css3中出现）

*  解决上述两个方法的不足，比较完美，移动端基本用flex布局
 *  考虑兼容性

4.表格布局

*  实用、兼容性好
 *  因为三个部分都当成单元格对待，若中间部分变高则其余部分也会被迫调整高度。在很多场景下并不需要两侧高度增高

5.网格布局（CSS3中出现）