今日复习记录-面试题目（重复最多的人就是天才）

请简单介绍Flex布局

一、 优缺点

1. Flex布局：操作简单，布局极为简单，移动布局应用广泛，兼容性较差
2. Pc采用传统布局，移动端或者不考虑兼容的pc可采用flex布局

Flex 布局原理

1. 给父盒子添加flex属性，来控制盒子的位置排列方式从而实现flex布局

2. 我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align 属性将失效

3. Flex布局又叫伸缩、弹性布局、伸缩盒布局、弹性布局、flex布局
   常见的父属性

4. Flex布局中默认的主轴是row，x轴

5. 如果想改变主轴方向可通过设置flex-direction来改变

6. flex-direction:column;将主轴改为y轴，纵轴

7. flex-direction:row; 将主轴改为x轴，横轴

8. flex-direction:row- reverse;主轴为x轴，并且翻转

9. flex-direction:column- reverse;主轴为y轴，并且翻转

10. 通过justify-content能够设置主轴子元素排列形式

11. 值为flex-start 所有子元素在主轴头部显示

12. 值为flex-end 所有子元素在主轴尾部显示

13. 值为flex-center 所有子元素在主轴居中对齐

14. 值为space-around 所有子元素平分剩余空间

15. 值为space-between 所有子元素先两边贴边在平分剩余空间

图片的懒加载和预加载

请将一下图片的懒加载和预加载不同点，他们的本质是什么？这两种技术对于服务器前段的影响是什么

什么是懒加载

1. 延迟加载图片或符合某些条件时才加载某些图片

什么是预加载

1. 图片加载就是在网页全部加载之前，提前加载图片。

两者的不同点

1. 两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

影响

1. 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

垂直居中的方法

.content {
            width: 300px;
            height: 300px;
            background-color: aqua;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
        }

还有很多继续更新