2020年前端面试题·二
2020年前端面试题·二
- css sprite 是什么，有什么优缺点
- display: none 和 visibility: hidden 的区别
- link 和 @import 的区别
- 如何创建格式化上下文（BFC），BFC有什么用
- 清除浮动的方式
- 为什么要做样式初始化
- display: inline-block 什么时候不会有间隙
- 元素浮动后，display 值为
- CSS 选择器权重
- CSS3 动画实现
- 常见CSS布局：[https://juejin.im/post/5e91a8a56fb9a03c9037928f](https://juejin.im/post/5e91a8a56fb9a03c9037928f)
- rgba() 和 opacity 的区别
- 几种方式实现已知或者未知宽度的垂直水平居中
css sprite 是什么，有什么优缺点
css sprite 是精灵图，有叫雪碧图，是将多个小图片拼合到一整张大图中，使用时通过 background-image、background-position 以及图片大小配合使用
优点：
- 减少 HTTP 请求数量，提高网页加载速度
- 便于切换风格
缺点：
- 制作麻烦且不利于维护
- 使用复杂，代码增多
display: none 和 visibility: hidden 的区别
两者都是让元素消失，但原理不一样：
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-spacingword-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">leftdiv>
<div class="right">rightdiv>
<div class="main">maindiv>
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">maindiv>
<div class="left">leftdiv>
<div class="right">rightdiv>
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">maindiv>
div>
<div class="left">leftdiv>
<div class="right">rightdiv>
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">leftdiv>
<div class="main">maindiv>
<div class="right">rightdiv>
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">leftdiv>
<div class="content">
<div class="main">maindiv>
div>
<div class="right">rightdiv>
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">leftdiv>
<div class="right">rightdiv>
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;
}