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）渲染成一个空格，也就是我们上面的代码
1既然是因为
2将
- 内的字符尺寸直接设为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 属性值要与后面对应的 input 标签 id 属性值相同
18. Img中alt和title的区别
alt只能是元素的属性，而title即可以是元素的属性也可以是标签
alt替换图片，tittle解释图片，alt还能搜索引擎优化，因为alt可以提供文字信息。
19. Px，Em ，2REM，%都有什么区别，相对的都是什么
css中字体常用单位px、em、rem和%的区别及用法总结 -vickylinj - 博客园 (cnblogs.com)