前端面试题精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40311523/article/details/107100044

2020年前端面试题·二

css sprite 是什么，有什么优缺点

css sprite 是精灵图，有叫雪碧图，是将多个小图片拼合到一整张大图中，使用时通过 background-image、background-position 以及图片大小配合使用

优点：

减少 HTTP 请求数量，提高网页加载速度
便于切换风格

缺点：

制作麻烦且不利于维护
使用复杂，代码增多

display: none 和 visibility: hidden 的区别

两者都是让元素消失，但原理不一样：

display: none;

display: none

<style>
	div {
    	width: 100px;
    	height: 100px;
    }

    .red {
      	background-color: red;
    }

    .green {
    	display: none;
      	background-color: green;
    }

    .blue {
      	background-color: blue;
    }
</style>
  
<body>
  	<div class="red"></div>
  	<div class="green"></div>
  	<div class="blue"></div>
</body>

会让元素完全从渲染树中消失，渲染的时候不占用任何空间
不会被继承，子元素消失是因为父元素在渲染树中消失
会引起文档重排
读屏器不会读取被 display: none; 的内容

visibility: hidden;

在这里插入图片描述

<style>
	div {
    	width: 100px;
    	height: 100px;
    }

    .red {
      	background-color: red;
    }

    .green {
    	visibility: hidden;
      	background-color: green;
    }

    .blue {
      	background-color: blue;
    }
</style>
  
<body>
  	<div class="red"></div>
  	<div class="green"></div>
  	<div class="blue"></div>
</body>

渲染树中依旧存在，渲染的时候虽然隐藏但仍占据空间
属性会被继承，子元素隐藏是因为继承了父元素上的 visibility: hidden;
不会引起文档重排
读屏器会读取被 visibility: hidden; 的内容

link 和 @import 的区别

首先，link 和 @import 都是为了引入外部样式
差别：

link 是 HTML 提供的方法，除了引入外部样式之外，还可以引入一些其他的东西；@import 是 CSS 提供的方法，只能引入样式
加载时间问题，link 引入的样式会和 HTML 同时加载，@import 引入的 CSS 会等页面加载完成后再加载
兼容性问题，link 兼容所有浏览器，@import 只兼容新版本的浏览器
当利用 JS 控制 DOM 去引入样式的时候，只能使用 link 不能使用 @import ，因为 @import 不是 DOM 可以控制的
@import 可以从样式表里引入其他样式表

总之，用 link 就完事了

如何创建格式化上下文（BFC），BFC有什么用

创建规则：

根元素
浮动元素（float 不为 none）
绝对定位元素（position 取值为 absolute 或 fixed）
overflow: hidden; 的元素
display: inline-block | table-cell | table-caption | flex | inline-flex; 的元素

作用：

可以包含浮动元素
不被浮动元素所覆盖
阻止父子元素之间的 margin 陷落

清除浮动的方式

父级元素定义高度
父级元素结尾新增空 div 并且 clear: both;
父元素定义伪元素 ::after 和 zoom
父级元素的 overflow: hidden; （将父级元素转为 BFC）
父级元素也浮动（将父级元素转为 BFC）

为什么要做样式初始化

因为不同浏览器的渲染引擎不同，对标签的默认样式会有不同的理解，所以渲染出来的样式不同，需要用样式初始化统一浏览器渲染引擎的理解

display: inline-block 什么时候不会有间隙

移除空格
margin 设置为负值
父元素使用 font-size: 0;
letter-spacing
word-spacing

元素浮动后，display 值为

block

CSS 选择器权重

!important 的权重最高，大于行内样式
行内样式
id 选择器，权重值加 100
类别选择器，属性选择器，伪类 / 伪元素选择器，权重值加 10
标签选择器，权重值加 1

CSS3 动画实现

依靠三个属性：transition 、transform 、animation；其中 transform 的 3d 必须依赖两个属性：transform-style 和 perspective

transition: property duration timing-function delay

transition-property ：设置需要过渡的属性
transition-duration ：设置过渡的时间
transition-time-function ：设置过渡的速度曲线
transition-delay ：设置过渡延迟时间

transform:

none ：不执行转换
translate(x, y) ：2d 转换
translate3d(x, y, z) ：3d 转换
translateX(x) ：沿 X 轴平移
translateY(y) ：沿 Y 轴平移
translateZ(z) ：沿 Z 轴平移
scale(x, y) ：2d 缩放
scale3d(x, y, z) ：3d 缩放
scaleX(x) ：沿 X 轴缩放
scaleY(y) ：沿 Y 轴缩放
scaleZ(z) ：沿 Z 轴缩放
rotate(angle) ：2d 旋转，angle 为正值，顺时针旋转；为负值，逆时针旋转
rotate3d(x, y, z, angle) ：3d 旋转
rotateX(angle) ：沿着 X 轴旋转
rotateY(angle) ：沿着 Y 轴旋转
rotateZ(angle) ：沿着 Z 轴旋转
skew(x-angle,y-angle) ：沿 X 和 Y 轴的 2d 倾斜
skewX(angle) ：沿 X 轴的 2d 倾斜
skewY(angle) ：沿 Y 轴的 2d 倾斜

transform-origin: x y z;

设置变换参照点的位置。x，y，z 分别对应 X，Y，Z 轴
x 和 y 支持使用 left 、right 、center 、px 、%
z 只支持 px

transform-style:

flat ：子元素不以 3d 效果展示
preserve-3d ：子元素以 3d 效果展示

perspective: number | none

number: 3d 元素与视图距离，以像素记，一般设置 500
none: 元素不设置透视效果

animation: name duration timing-function delay iteration-count direction

配合 @keyfrom 使用
animation-name 动画名字，@keyform 定义的
animation-duration 动画执行时间
animation-timing-function 动画速度曲线
animation-delay 动画延时
animation-iteration-count 动画播放次数
animation-direction 是否反向播放

常见CSS布局：https://juejin.im/post/5e91a8a56fb9a03c9037928f

流体布局

<style>
	div {
	    height: 100px;
	}
	
	.left {
	    width: 100px;
	    float: left;
	    background-color: red;
	}
	
	.right {
	    width: 100px;
	    float: right;
	    background-color: green;
	}
	
	.main {
	    margin: 0 100px;
	    background-color: blue;
	}
</style>

<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</body>

圣杯布局

<style>
	.db {
	    padding: 0 100px;
	    height: 100px;
	}
	
	.left {
	    float: left;
	    width: 100px;
	    height: 100px;
	    margin-left: -100%;
	    position: relative;
	    left: -100px;
	    background-color: red;
	}
	
	.right {
	    float: left;
	    width: 100px;
	    height: 100px;
	    margin-left: -100px;
	    position: relative;
	    left: 100px;
	    background-color: green;
	}
	
	.main {
	    float: left;
	    width: 100%;
	    height: 100px;
	    background-color: blue;
	}
</style>

<body>
    <div class="db">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

双飞翼布局

<style>
	.left {
	    float: left;
	    width: 100px;
	    height: 100px;
	    margin-left: -100%;
	    background-color: red;
	}
	
	.right {
	    float: left;
	    width: 100px;
	    height: 100px;
	    margin-left: -100px;
	    background-color: green;
	}
	
	.content {
	    float: left;
	    width: 100%;
	}
	
	.main {
	    margin: 0 100px;
	    height: 100px;
	    background-color: blue;
	}
</style>

<body>
    <div class="content">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

flex 布局

<style>
	.db {
	    display: flex;
	}
	
	.left {
	    background-color: red;
	    height: 100px;
	    width: 100px;
	}
	
	.right {
	    background-color: green;
	    height: 100px;
	    width: 100px;
	}
	
	.main {
	    background-color: blue;
	    height: 100px;
	    flex-grow: 1;
	}
</style>

<body>
    <div class="db">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>

定位布局

<style>
	.left {
	    background-color: red;
	    height: 100px;
	    width: 100px;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	
	.right {
	    background-color: green;
	    height: 100px;
	    width: 100px;
	    position: absolute;
	    top: 0;
	    right: 0;
	}
	
	.content {
	    padding: 0 100px;
	}
	
	.main {
	    background-color: blue;
	    height: 100px;
	}
</style>

<body>
    <div class="left">left</div>
    <div class="content">
        <div class="main">main</div>
    </div>
    <div class="right">right</div>
</body>

两列布局：左侧宽度固定，右侧自适应

<style>
	div {
	    height: 500px;
	}
	
	.left {
	    background-color: red;
	    width: 200px;
	}
	
	.right {
	    background-color: green;
	}
	
	// 方案一：左侧浮动，右侧自适应
	.left {
	    float: left;
	}
	
	// 方案二：右侧绝对定位，配合right: 0
	.right {
	    position: absolute;
	    top: 0;
	    left: 200px;
	    right: 0;
	}
	
	// 方案三：左侧绝对定位，右侧设置 margin
	.left {
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	
	.right {
	    margin-left: 200px;
	}
	
	// 方案四：flex 布局
	.outer {
	    display: flex;
	}
	
	.right {
	    flex: 1;
	}
</style>

<body>
    <div class="outer">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

rgba() 和 opacity 的区别

rgba() 和 opacity 都能实现透明效果，不同的是 rgba() 作用的是元素的颜色，opacity 是元素以及元素内部所有内容的透明度。另外，rgba() 不会被继承。

几种方式实现已知或者未知宽度的垂直水平居中

/* 思路一：父、子容器（块级）宽高都已知，可以利用 margin */
.box1 {
    width: 400px;
    height: 400px;
    background-color: rgb(129, 2, 2);
    overflow: hidden;  /* 父容器要格式化上下文，防止塌陷 */ 
}

.box1_son {
    width: 200px;
    height: 200px;
    background-color: rgb(6, 88, 6);
    margin: 100px auto;
}

/* 思路二：父容器宽高未知、子容器宽高已知，子绝父相 + margin */
.box1 {
    position: relative;
    background-color: rgb(129, 2, 2);
}

.box1_son {
    width: 200px;
    height: 200px;
    background-color: rgb(6, 88, 6);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

/* 思路三：父、子容器宽高都未知，子绝父相 + 过渡 */
.box1 {
    position: relative;
    background-color: rgb(129, 2, 2);
}

.box1_son {
    background-color: rgb(6, 88, 6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

/* 思路四：伸缩盒子 */
.box1 {
    width: 400px;
    height: 400px;
    background-color: rgb(129, 2, 2);
    display: flex;
    justify-content: center;
    align-items: center;
}