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)
2023最新Web前端面试题精选大全及答案(一)相关推荐
- 2021年最新Web前端面试题精选大全及答案
目录 HTML.CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载(按需加载路由) React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性 ...
- 2023最新高频前端面试题总结(附答案)
目录 1.vue双向数据绑定的原理? 2.vue的生命周期有哪些 3.v-if 和v-show有什么区别? 4.async await 是什么?它有哪些作用? 5.数组常用的方法?哪些方法会改变原数组 ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 最新web前端面试题大全
私信发送pdf手册版 1 | 前端基础 1.1 | HTTP/HTML/浏览器 说一下 http 和 https 参考回答: https 的 SSL 加密是在传输层实现的. (1)http 和 h ...
- 最新web前端面试题
HTML面试题 1.简述一下你对 HTML 语义化的理解? ①用正确的标签做正确的事情. ②html 语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析:即使在没有样式 CSS 情况下也 ...
- 最新Web前端面试题-HTML-CSS-Javascript
一.HTML基础 1.常见浏览器的内核 (1)IE: trident 内核 (2)Firefox:gecko 内核 (3)Safari: webkit 内核 (4)Opera: 以前是 presto ...
- 应届生web前端面试题_2020最新Web前端经典面试题试题及答案(持续更新)
Web前端面试题 Web前端面试题:说说你对webpack的看法 解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
- web前端面试题(面试题大全)
web前端面试题[持续更新中...] React系列 UmiJS系列 Webpack系列 ES6系列 Vue系列 JavaScript系列 CSS系列 HTTP系列 模块化系列 版本控制系列 Type ...
最新文章
- tableview的两个重用cell方法
- PHP线程安全和非线程安全的区别
- iOS12-Swift5-Date转化为String:DateFormatter
- C语言求网格的最大不重复路径数的算法(附完整源码)
- 每个产品经理都应该知道的机器学习术语
- linux telnet无法连接,奇怪的问题:telnet无法连接另一台server的正常的开放端口
- 查看svn的版本(转载)
- linux vim个人配色方案
- windows ping 端口测试
- 在Mac上Topaz Gigapixel AI作为Photoshop插件未显示在“文件”->“自动”中的解决方法
- 基于PaddlePaddle2.0的蝴蝶图像识别分类——利用预训练残差网络ResNet101模型中参数的调整,数据增强
- 泛微 linux mobile手册,泛微E-Mobile5.0服务端安装手册.doc
- 红米note3 android go,免解锁刷机全教程:红米 NOTE3 全网通 开吃棉花糖
- odb格式Linux,ODB格式文件 如何打开ODB文件 ODB是什么格式的文件 用什么打开 - The X 在线工具...
- rfid射频前端的主要组成部分有_RFID复习题目
- W3C官网查找资源教程
- 雷达信号处理-雷达应用
- GMAC接口(2)——协议
- 大数据应用在医疗行业的5个经典案例
- 【信号去噪】基于蚁群算法优化小波阈值实现信号去噪附matlab代码