前端面试题——基础知识

由于前端知识点太多就很复杂，面试的时候有很多面试官又经常问一些偏基础的技术点，故整理此文章来帮助大家更高的应对面试，也以备自己不时之需。

1. div垂直水平居中的方法

   1. .parnet {
           position: relative;
           width: 100%;
           height: 200px;
           background: red;
       }
       .child {
           position: absolute;
           width: 100px;
           height: 100px;
           left: 50%;
           top: 50%;
           margin-left: -50%;
           margin-top: -50%;
       }
   2. .parent {
           width: 100%;
           height: 2rem;
           display: flex;
           align-items: center;
           justify-content: center;
           background-color: yellow;
       }
       .child {
           width: 1.5rem;
           height: 1.5rem;
           background-color: green;
        }
   3. .parnet {
           position: relative;
           width: 100%;
           height: 200px;
           background: red;
       }
       .child {
           position: absolute;
           width: 100px;
           height: 100px;
           left: 0;
           top: 0;
           bottom: 0;
           right: 0;
           margin: auto;
       }
   4..parnet {
           position: relative;
           width: 100%;
           height: 200px;
           background: red;
       }
       .child {
           position: absolute;
           transform: translate(-50%, -50%);
           left: -50%;
           top: -50%;
       }
   5. .parnet {
           display: table-cell;
           vertical-align: middle;
           text-align: center; 
       }
       .child {
           width: 100px;
           height: 100px;       
       }
   

2. 清除浮动的几种方法：

3. a.父元素定义height

4. 原理：父元素手动定义高度之后就解决了父元素无法自动获取高度的问题

5. 优点：简单、代码少、容易掌握

6. 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父元素的高度不一致，会产生问题

7. b. 父元素设置overflow: hidden

8. 原理：父元素必须设置width属性或者zoom:1，同时不能定义height，使用overflow：hidden时，浏览器会自动检测出浮动区域的高度

9. 优点：简单、代码少、浏览器兼容性很好

10. c. 给父元素在定义一个class类名

11. .parent:after {content: '.';height:0;display:block;clear:both;}

12. 该样式在父元素的最后添加了一个:after伪元素，可以清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方也用table，因为table也是一个块级元素）