「2021」高频前端面试题汇总笔记（其二）

近期整理了一下高频的前端面试题，分享给大家一起来学习。如有问题，欢迎指正！

隐藏元素（CSS）

• display:none;：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility:hidden;：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity:0;：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• margin-left: -1000px;:使元素出屏幕外，以此来实现隐藏。
• z-index: 负值: 使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0): 将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

    background-color:rgba(255,0,0,0);
    border: 0;

    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;

CSS优先级算法

选择器	格式	优先级权重
id选择器	#id	100
类选择器	#classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

1. !important声明的样式优先级最高，如果冲突再进行计算。
2. 如果优先级相同，则选择最后出现的样式。
3. 继承得到的样式的优先级最低。

清除浮动

1. 万能清除法

.clearfloat{
    clear:both;
    height:0;
    overflow:hidden;
}

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 
优点：简单、代码少、浏览器支持好、不容易出现怪问题 
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

2. 父级div定义 height

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
        /*解决代码*/
        height: 200px;
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px;
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD;
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD;
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 
优点：简单、代码少、容易掌握 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 
建议：不推荐使用，只建议高度固定的布局时使用

3. 父级div定义 伪类:after 和 zoom

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }

    /*清除浮动代码*/
    .clearfloat:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    .clearfloat {
        zoom: 1
    }
</style>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>   

原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 
建议：推荐使用，建议定义公共类，以减少CSS代码。

4. 父级div定义 overflow:hidden

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }

    /*清除浮动代码*/
    .clearfloat:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    .clearfloat {
        zoom: 1
    }
</style>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

    原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 
    优点：简单、代码少、浏览器支持好 
    缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 
    建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5. 父级div定义 overflow:auto

<style type="text/css">
    .div1 {
        background: #000080;
        border: 1px solid red;
        width: 98%;
        overflow: auto
    }

    .div2 {
        background: #800080;
        border: 1px solid red;
        height: 100px;
        margin-top: 10px;
        width: 98%
    }

    .left {
        float: left;
        width: 20%;
        height: 200px;
        background: #DDD
    }

    .right {
        float: right;
        width: 30%;
        height: 80px;
        background: #DDD
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 
优点：简单、代码少、浏览器支持好 
缺点：内部宽高超过父级div时，会出现滚动条。 
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

元素垂直居中

1. top&left

<style>
    .parent {
        position: relative;
    }

    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

2. margin:auto

<style>
    .parent {
        position: relative;
    }

    .child {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>

3. top&leftⅡ

<style>
    .parent {
        position: relative;
    }

    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        /* 自身 height 的一半 */
        margin-left: -50px;
        /* 自身 width 的一半 */
    }
</style>

4. flex

<style>
    .parent {
        display: flex;
        justify-content:center;
        align-items:center;
    }
</style>

5. table-cell

<style>
    .cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 240px;
        height: 180px;
        border: 1px solid #666;
    }
</style>

盒模型

position

• relative

• fixed

• absolute

• static: 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。

• inherit: 规定从父元素继承position属性的值。