1. 位置宽高垂直水平居中，你知道多少种做法？

1. flex 布局（new）

{
    display: flex;   
    justify-content: center;  
    align-items: center;
}

2. flex 布局（new）

{
   text-align: center;
   vertical-align: middle;
}

3. 行高和高设置一样的值

{
text-aline：center；
height:30px;
line-height:30px;
}

4. position: absolute + margin: auto

优点：兼容 IE8 及以上缺点：父元素必须声明高度

.parent{
    position:relative;
}
.child{
    margin: auto;  
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

5. position: absolute + translate

.parent{
    position: relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

2. 简述优雅降级和渐进增强

何谓渐进增强：

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

何谓优雅降级：

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

3. postion有几种取值？每种取值相对于谁来进行定位

在CSS中，`position` 属性有五种取值：`static(静态)`、`relative`、`absolute`、`fixed` 和 `sticky(黏性)`。每种取值相对于不同的参考元素进行定位。

static：默认值，元素在文档流中正常排列，不受 top、bottom、left、right 影响。
relative：相对于元素自身在文档流中的位置进行定位，通过设置 top、bottom、left、right 属性值来进行偏移。如果没有设置偏移值，则元素仍然在文档流中的位置不变。
absolute：相对于最近的非 static 定位祖先元素进行定位，如果没有祖先元素，则相对于文档的 body 元素。通过设置 top、bottom、left、right 属性值来进行偏移。元素的位置不占据文档流。
fixed：相对于浏览器窗口进行定位，通过设置 top、bottom、left、right 属性值来进行偏移。元素的位置不随滚动条滚动而改变，常用于实现固定的导航栏、悬浮广告等效果。
sticky：在 relative 和 fixed 之间切换，当元素在可视区域内时，表现为 relative，当元素滚出视口时，表现为 fixed。

4. display:none和visibility:hidden的区别

display：none和visibility：hidden的区别

1、display：none隐藏完元素所占据的空间也会消失。visibility：hidden隐藏完元素还是占据空间。

2、display：none没有继承性，visibility：hidden有继承性。给父元素设置visibility：hidden，其子元素也会继承该属性，如果给子元素设置visibility：visible，则子元素会显示出来。

3、visibility：hidden不会影响计数器的运算，比如ol标签中的li标签，隐藏其中的第二个标签，后续标签的序号不变，而如果使用display：none后续标签的序号会衔接上去上一个。

4、CSS3的transition支持visibility属性，但是并不支持display

5、 display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

visibility:hidden则是将元素隐藏，但该元素仍然占据页面空间，并且会触发该元素的事件。

因此，

如果想要完全隐藏一个元素，不占据页面空间，并且不触发该元素的事件，可以使用display:none；如果需要隐藏一个元素，但仍然需要占据页面空间和触发该元素的事件，可以使用visibility:hidden。

5. 浏览器中的回流和重绘是什么，分别在什么情况下触

回流(reflow)是页面中元素的尺寸，布局，隐藏或重新构建，这个称为回流(回流会阻塞用户在浏览器中的操作)。因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手。回流必将引起重绘，而重绘不一样引起回流。但是回流是自上而下的，所以下不触犯上，我们可以在最后面修改信息,这样对全局影响较少。

回流何时发生

    1.添加或删除DOM元素
    2.元素位置改变
    3.元素尺寸改变(边距，填充，边框，宽度，高度)
    4.元素内容改变(文本改变，图片大小改变而引起的计算值和高度改变)
    5.页面渲染初始化
    6.浏览器窗口改变(resize触发时)
    7.fixed定位的元素,在拖动滚动条的时候会一直回流
    8.offset相关属性计算
    9.设置style的值

重绘

说白了就是更改元素的背景颜色,字体颜色一类的,重绘只影响元素的外观,风格,其不影响布局

6. px、em、rem的区别

逻辑像素(css的px) = 设备像素 × 缩放因子

为了移动端更好的适配我们引入了em和rem这2个动态单位

em的大小与父元素的font-size有关，rem的大小与根元素html的font-size有关

一般在移动端我们会使用js动态计算跟节点html的font-size来达到自适应的目的。

7. 为什么会出现浮动？清除浮动有哪些方式？比较好的方式是哪一种

什么是清除浮动？

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

为什么要清除浮动？

导致背景不能正常显示

边框不能撑开，

清除浮动有哪些方法？

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；） （不推荐）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fahter {
            width: 400px;
            border: 1px solid deeppink;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

2.父级添加overflow属性（父元素添加overflow:hidden） （不推荐）

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    
    overflow: hidden;
}

3.使用after伪元素清除浮动（推荐使用）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

4.使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
 </div>
 <div class="footer"></div>

前端常见面试题