2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新 5

41.什么是FOUC？如何避免？

FOUC： 即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。

如何避免：

样式表前置 ： 根据浏览器渲染的顺序，将CSS在中引入或者嵌入

尽量使用link避免使用@import、

42.清除浮动的方式，各自优缺点？

额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签

优点： 通俗易懂，书写方便。（不推荐使用）

缺点： 添加许多无意义的标签，结构化比较差。

父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持

43.在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系

44.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

45.base64的原理及优缺点？

优点可以加密，减少了HTTTP请求

缺点是需要消耗CPU进行编解码

46.流体布局，圣杯布局，双飞翼布局？

圣杯布局和双飞翼布局的区别：

相同点

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。

不同点

主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right 。

47.postcss的作用

PostCSS是一个使用JS插件转换CSS的工具。这些插件可以支持变量和混合、transpile未来CSS语法、内联图像等。

作用：

支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin)

编译速度大大提升。PostCSS 声称比预处理器快 3-30 倍。

丰富的插件系统，解放你的双手。

css模块化，将作用域限制于组件内，避免了全局作用域的问题，再也不用担心样式名重复了

Postcss属于css后处理器，动态编译css，也就是说，在运行的时候进行编译。

48.css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

49.水平居中方法

元素为行内元素，设置父元素text-align:center

如果元素宽度固定，可以设置左右margin为auto;

绝对定位和移动: absolute + transform

使用flex-box布局，指定justify-content属性为center

display设置为tabel-ceil

50.详细说一说css3的animation，transition

animation

css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义动画过程

每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，

这些相关的动画子属性有：

animation-name定义动画名

animation-duration定义动画播放的时长

animation-delay定义动画延迟播放的时间

animation-direction定义 动画的播放方向

animation-iteration-count定义播放次数

animation-fill-mode定义动画播放之后的状态

animation-play-state定义播放状态，如暂停运行等

animation-timing-function定义播放的方式，如恒速播放、减速播放等。

transition

transition-property ：规定设置过渡效果的css属性名称

transition-duration ：规定完成过渡效果需要多少秒或毫秒

transition-timing-function ：指定过渡函数，规定速度效果的速度曲线

transition-delay ：指定开始出现的延迟时间

51.什么是css Hack？常见Hack

描述：是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

常见hack：

属性级Hack：比如IE6能识别下划线“”和星号“*”，IE7能识别星号“*”，但不能识别下划线””，而firefox两个都不能认识。

选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。

IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。

52.浏览器是怎样解析CSS选择器的？

浏览器解析 CSS 选择器的方式是从右到左

53.抽离样式模块怎么写，说出思路

CSS可以拆分成2部分：公共CSS 和 业务CSS：

网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务

对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

54.元素竖向的百分比设定是相对于容器的高度吗？

不是

无论是竖向还是横向的百分比设定都是相对于容器的宽度。我们可以通过margin和padding来进行验证

55.全屏滚动的原理是什么？ 用到了CSS的那些属性？

原理类似图片轮播原理，超出隐藏部分，滚动时显示

可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

56.设置元素浮动后，该元素的 display 值会如何变化

设置元素浮动后，该元素的 display 值自动变成 block

57.display:inline-block 什么时候会显示间隙？

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距

非 inline-block 水平元素设置为 inline-block 也会有水平间距

可以借助 vertical-align:top; 消除垂直间隙

可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙

把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

58.pageX，clientX，screenX，offsetX区别？

pageX/Y： 对于整个页面来说，包括了被卷去的body部分的长度

clientX/Y： 点击位置距离当前body可视区域的x，y坐标

screenX/Y： 点击位置距离当前电脑屏幕的x，y坐标

offsetX/Y： 相对于带有定位的父盒子的x，y坐标

59.如何对不同IE版本浏览器做兼容测试？

使用工具切换IE版本，然后在IE浏览器运行测试

60.border- radius详解

在开发中我们经常通过正方形设置border- radius：50%来实现圆

border-radius参数选择：

border-radius：10px；将创建四个大小一样的圆角

border-radius:10px 15px 10px 15px; 四个值分别表示左上角、右上角、右下角、左下角

border-radius:10px 15px; 第一个值表示左上角、右下角；第二个值表示右上角、左下角

border-radius:10px 15px 5px; 第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。

61.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing: antialiased;

63.CSS3渐变？

CSS3 定义了两种类型的渐变（gradients）：

线性渐变 - 向下/向上/向左/向右/对角方向

径向渐变 -（Radial Gradients）- 由它们的中心定义

线性渐变：

语法：background-image:linear-gradientdirection,color-stop1,color-stop2,……);

direction：渐变方向/角度，可选（45deg，to bottom，to top,to right,to left,to left top…）

color-stop：选择颜色rgba可以设置透明度，也可以设置色标点区域 例：rgba(255,255,255,0.3) 20%

径向渐变：

语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”

at position起点：中心点的位置，可以是关键字（水平方向–left,center,right, 垂直方向–top,center,bottom），具体数值或百分比。

64.响应式布局和自适应布局的区别 ?

响应式布局是指通过CSS媒体查询，根据不同设备或视口宽度设置不同的样式来适应不同屏幕大小，实现页面的自动调整和优化。响应式布局可以使网站在桌面、平板电脑和手机等多种设备上都能够以最佳的显示效果呈现。

自适应布局是指根据屏幕尺寸选择合适的布局方式，使页面在不同设备上看起来更加美观和可读性更好。自适应布局相对来说更加固定一些，它的页面布局通常是由几个固定的布局组成，在不同的屏幕尺寸下选择不同的布局组合来进行展示，而不是像响应式布局那样直接改变样式。

65.z-index失效的几种情况

position属性未设置或值为static：如果要使用z-index属性，您需要首先将元素的position属性设置为relative、absolute或fixed。否则，即使设置了z-index，也无法使其生效。

父元素的z-index值高于子元素：当一个父元素和它的子元素都设置了z-index时，子元素的z-index可能会失效。

浮动元素的z-index失效：当使用浮动元素时，z-index属性可能不起作用。这是因为浮动本身就具有一定的层叠性质，并且浮动元素之间的堆叠顺序由它们在文档流中的先后顺序决定。

66.float之后display值改为？

block

67.css中的锚点

<a name="go">来我这里</a>
......
<a href="#go">我来了</a>

可以使用id属性来替代name属性 ， 使用id来定义锚点，可以定位针对任何标签来定位。name属性只能针对a标签来定位。

68.移动端1px问题解决方案

利用 css 的 伪元素::after + transfrom 进行缩放

优点：全机型兼容，实现了真正的1px，而且可以圆角。适用于老项目。

缺点：暂用了after 伪元素，可能影响清除浮动。

设置viewport的scale值

优点：全机型兼容，直接写1px不能再方便。

缺点：适用于新的项目，老项目可能改动大。

使用组件库vant/ant-design-mobile

69.阻止移动端H5开发浏览器默认左右滑动行为

html{
    touch-action:none;
}
//此时上下左右都不可滑动
--------改动
html{
touch-action:none;
touch-action:pan-y;
}

70.CSS中 定位position 和 transform 移动元素的比较

性能方面：transform性能远高于position

通过translate移动，元素依然会占据其原始空间。如果通过position移动则会改变位置触发重绘

71.margin-left：auto，margin-right：auto，margin：auto区别

margin-left:auto 右对齐

margin-right：auto 左对齐

margin：auto 居中

72.css全屏滚动

overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;必要属性

<style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        ul {
            margin: 0;
            /* scroll-behavior: smooth 让页面在滚动时拥有平滑的过渡效果，而不是瞬间跳转 */
            scroll-behavior: smooth;
            font-size: 40px;
            width: 100%;
            height: 100%;
            /* 
            overflow-y: auto 表示当内容超出元素的高度时，元素会显示垂直方向的滚动条以便用户浏览。如果内容不超出元素的高度，则不会显示滚动条。
            overflow-x: hidden 则表示当内容超出元素的宽度时，元素不会显示水平方向的滚动条，同时超出部分的内容也将被隐藏。
            */
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #000;
            /* 
            scroll-snap-type: y mandatory; 表示在垂直方向上开启滚动对齐功能，并强制要求元素对齐到滚动容器的边缘。这样可以确保每个子元素都在独立的、整数倍的位置停留，从而实现更加规整的页面布局。
            */
            scroll-snap-type: y mandatory;
            /*设置父级*/
            padding: 0;
        }
        li {
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            /* 
            scroll-snap-align: center; 则表示对齐方式为中心对齐，当子元素的中心点（水平轴和垂直轴的中心点）与滚动容器的中心点重合时，就会触发对齐效果。
            */
            scroll-snap-align: center;
            /*子级设置*/
            text-align: center;
        }
        li:nth-child(1) {
            background-color: teal;
        }
        li:nth-child(2) {
            background-color: gold;
        }
        li:nth-child(3) {
            background-color: green;
        }
    </style>

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>