2023最新Web前端面试题精选大全及答案（一）

1.Opacity和grba的区别

是 opacity 会继承父元素的 opacity 属性，而 rgba 设置元素的后代元素不会继承不透明属性

2.Display：none和visibilty区别

display: none会产生回流和重绘，visibility:hidden;和opacity:0;只会引起页面重绘

回流一定会触发重绘，而重绘不一定会回流

visibility具有继承性，给父元素设置visibility:hidden;，子元素也会继承这个属性。但是如果重新给子元素设置visibility:visible,则子元素又会显示出来。这个和display: none有着质的区别

opacity也有继承性，但是父元素隐藏后，给子元素设opacity:1;，子元素也不会显示

opacity:0;隐藏后的元素可以点击

3.有几种定位，或者定位有几种值

正常定位，相对定位，绝对定位，fixed固定定位，sticky粘性定位，

4.不同的定位参照的父级是谁

正常定位，相对定位，绝对定位，fixed固定定位，sticky粘性定位，

自己，自己，祖父元素，浏览器窗口，相对，固定结合。

5. 说一下有你知道的c3的样式

选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面

css3新特性 - jsxpang - 博客园 (cnblogs.com)

6.为什么要用字体图标

设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。

开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。

字体图标缩放不失真，不会变模糊。

减少网络请求次数，一个css文件可包含所有图标。

节约流量，图标是图片格式，每个几K到几十K，而css文件一般一共只有几K。

7.什么是精灵图，如何使用，有什么好处

服务器：1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSSSprites最大的优点，也是其被广泛传播和应用的主要原因；

浏览器：2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

设计师：3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

程序员：4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

8.两列布局如何实现，或者三列布局如何实现

两列布局

1.左边定宽浮动，右边自适应

2.flex布局设置

三列布局

1.两边左右浮动，中间结合margin：0 auto；

2.两边定宽，中间自适应---子元素都左浮动float：left；

3.行内块级显示--给每一块元素设置为行内块级元素

4.父元素：display:flex,子元素全部flex:1;为flex：1，1，0%。自适应

5.父元素flex布局+左右定宽+中间元素flex:1;

6.绝对定位实现

9.品字形布局如何实现

上口用块级元素的margin

下两口用text-aligin：center；

10.display有哪些值？说明他们的作用

inline（默认值）：表示指定对象为内联元素

none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留

block： 指定对象为块元素。

list-item：指定对象为列表项目。

inline-block：指定对象为内联块元素。（这是CSS2中的属性）

table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）

inline-table：指定对象作为内联元素级的表格。类同于html标签table（CSS2）

table-caption：指定对象作为表格标题。类同于html标签caption（CSS2）

table-cell：指定对象作为表格单元格。类同于html标签td（CSS2）

table-row：指定对象作为表格行。类同于html标签tr（CSS2）

table-row-group：指定对象作为表格行组。类同于html标签tbody（CSS2）

table-column：指定对象作为表格列。类同于html标签col（CSS2）

table-column-group：指定对象作为表格列组显示。类同于html标签colgroup（CSS2）

table-header-group：指定对象作为表格标题组。类同于html标签thead（CSS2）

table-footer-group：指定对象作为表格脚注组。类同于html标签tfoot（CSS2）

run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）

box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

11.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

1既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排

2将<ul>内的字符尺寸直接设为0

3将间隔消除了，li内的字符间隔也被设置，所以再设置一下。

.wrapul{letter-spacing: -5px;} .

wrap ulli{letter-spacing: normal;}

12.CSS选择符有哪些？哪些属性可以继承？

13.CSS优先级算法如何计算？

答案链接：

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ - 麋鹿鲁哟 - 博客园(cnblogs.com)

14.CSS3新增伪类有那些？

答案链接：

(34条消息) [CSS]CSS3有哪些新增的伪类_DaftJayee的博客-CSDN博客_css3 新特性和伪类有哪些?

15.页面导入样式时，使用link和@import有什么区别？

答案链接：

页面导入样式时，使用link和@import有什么区别？ - 腾讯云开发者社区-腾讯云(tencent.com)

16.title与h1的区别、b与strong的区别、i与em的区别？

答案链接：

(34条消息) title与h1的区别、b与strong的区别、i与em的区别？_前端_小明的博客-CSDN博客

17.Label的作用是什么？是怎么用的？

鼠标用户改进了可用性

如用户：123123213；点击用户可以输入，不用点输入框

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

label 的 for 属性值要与后面对应的 input 标签 id 属性值相同

18. Img中alt和title的区别

alt只能是元素的属性，而title即可以是元素的属性也可以是标签

alt替换图片，tittle解释图片，alt还能搜索引擎优化，因为alt可以提供文字信息。

19. Px，Em ，2REM，%都有什么区别，相对的都是什么

css中字体常用单位px、em、rem和%的区别及用法总结 -vickylinj - 博客园 (cnblogs.com)