2021年前端面试题及答案_Raleway的博客-CSDN博客_前端最新面试题

2020前端JavaScript面试题/错题整理_前端啤酒屋-CSDN博客_js前端面试题2020

2020前端面试题及答案汇总_盼盼盼的博客-CSDN博客

CSS 盒模型（width + padding + border + margin）

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

• 在box-sizing属性为conten-box的时候，width=元素的内容区
• 在box-sizing属性为border-box的时候，width=元素内容区+padding+border

1、-webkit-, -moz-, -o-, -ms- 私有前缀：

目的：向前兼容不同的老版本的浏览器

-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer

解决：npm autoprefixer工具。采用CSS预处理语言：Sass 与 Less 

2、postcss:postcss - 简书

                     PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网

Sass 与 Less ：sass和less - 简书

                         Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

                         Less 中文网

需要动手实践操作。

3、css优先级，属性选择器的优先级在哪

 ！important>内联样式>内部样式>外部样式
选择器的优先级中：最高的是ID选择器
紧接着是：类选择器、属性选择器、伪类选择器
再下来是：元素选择器、伪元素选择器
最后是：其他选择器
至于同级的选择器一般看在页面中出现的位置，后写的生效。

选择器的权重计算：

第一等：代表内联样式，如: style=” ”，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表class，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值

4、伪类选择器和伪元素选择器

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

伪类：伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。)；还有不能被常规CSS选择器获取到的信息。(比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child来获取到。)只有一个：

伪元素：本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码），伪元素不是节点，它不会出现在DOM树中，但是在显示上会具备节点的效果
有两个：：

区别：
伪类与伪元素都是用于向选择器加特殊效果 ，伪类与伪元素的本质区别就是是否抽象创造了新元素 ，伪类只要不是互斥可以叠加使用， 伪元素在一个选择器中只能出现一次，并且只能出现在末尾

CSS选择器以及如何区分伪类选择器和伪元素选择器_就是干！！的博客-CSDN博客_伪元素选择器和伪类选择器区别

5、CSS动画：

（1）Transform: 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-origin

允许你改变被转换元素的位置。

rotate、scale、scaleX、scaleY、skewX、skewY、skew、matrix 

（2）Transition：transition: property duration timing-function delay;

 transition: 1s 1s height ease;

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

（3）Animation+@keyframes

animation: 1s 1s rainbow linear 3 forwards normal;

6、垂直水平居中的几种实现方式

一、固定宽高：

（1）定位 + margin-top + margin-left

    .box-container{
        position: relative;
            width: 300px;
        height: 300px;
    }
    .box-container .box {
        width: 200px; 
        height: 100px;
        position: absolute; 
        left: 50%; 
        top: 50%;
        margin-top: -50px;    /* 高度的一半 */
        margin-left: -100px;    /* 宽度的一半 */
    }

（2）定位 + margin

 .box-container{
        position: relative;
    }
    .box {
        width: 100px;
        height: 100px;
        position: absolute; 
        left: 0; 
        top: 0; 
        right: 0; 
        bottom: 0;
        margin: auto;

（3）absolute + calc，存在兼容问题（依赖calc的兼容性）

.box-container{
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

二、未知宽高

1、transform 方案: 存在兼容问题：

    .box {
        position: relative; 
        left: 50%; 
        top: 50%;
        transform: translate(-50%, -50%);    
    }

2、flexbox 方案: 存在兼容问题

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

3、display: table-cell 无兼容性问题

    .box {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        display: table-cell;    
        text-align: center;    
        vertical-align: middle;
    }
（1）通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
（2）父元素：display:flex；子元素：align-self:center;
（3）为父元素添加伪元素:before，使得子元素实现垂直居中：
父元素:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
（4）父元素display:table，子元素display：table-cell的方式实现CSS垂直居中
（5）给子元素的position:relative，再通过translateY即可定位到垂直居中的位置：translateY(-50%);
（6）设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。 

7、

8、CSS和JS的位置会影响页面效率，为什么？

css在加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout，所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。

js脚本应该放在底部，原因在于js线程与GUI渲染线程是互斥的关系，如果js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

9、word-wrap（Overflow-Wrap） vs. word-break & hyphens  允许长单词或数字换行

（1）word-break属性指定非CJK脚本的断行规则。

提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法overflow-wrap。

（2）word-break: normal|break-all|keep-all; (break-word只有Chrome、Safari等部分浏览器支持)断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。排列比较紧凑。行内元素是没有效果,但谷歌可以。

word-break: break-all 在特殊的标点符号时无效，比如连续一串中文或英文感叹号，此时反而是 break-word 有效；word-break: keep-all 会在空格或连字符 - 时拆分单词，不止是空格

word-wrap: normal|break-word; 首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。word-wrap对行内元素是没有效果的。

（3）white-space:normal | nowrap | pre | pre-wrap | pre-line;

white-space:nowrap：不换行。

（4）hyphens: none|manual|auto|initial|inherit;是否允许英文换行时添加连字符。使用时，HTML页面，必须为英文语言 

<html lang="en-US">

10、text-decoration:

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

text-decoration-skip-ink ：不属于text-decoration属性简写中的一部分。IE不支持。

By default, browsers will “skip” areas where the “ink” of a character crosses an underline, like so:

You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

text-decoration-skip-ink: none;

-webkit-text-decoration-skip: none;

11、Flex 布局： 30 分钟学会 Flex 布局 - 知乎

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

Flex 容器属性：

有下面六种属性可以设置在容器上，它们分别是：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

除了基本的排列和居中用法外，还有伸缩的作用：

Flex 项目属性：

有六种属性可运用在 item 项目上：

1. order：定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值对该属性无效。。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，这时候 item 的宽高取决于 width 或 height 的值。flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。

例：当主轴为水平方向的时候，当设置 flex-basis为auto之外的值，项目的宽度设置值会失效

• 当 flex-basis 值为 0 % 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。
• 当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

 11、Grid 布局：