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)

  • 你可能感兴趣的:(前端,css3,html,开发语言)