2022最新Web前端经典⾯试试题及答案——CSS篇
起点低怕什么,⼤不了加倍努⼒。⼈⽣就像⼀场马拉松⽐赛,拼的不是起点,⽽是坚持的耐⼒和成长的速度。只要努⼒不⽌,进步也会不⽌。
⼀、谈谈你对 BFC 的理解及作⽤。
BFC 是 Block Formatting Context 格式化上下⽂的缩写,就是页⾯上⼀个隔离的独⽴容器,容器内的⼦元素不会影响到外⾯的元素。有⼀个独⽴的块级渲染区域,该区域有⼀套渲染规则来约束盒⼦的布局,与外部的区域没有关系。
1.1、如何创建 BFC
float 的值不为 none
position 的值为 absolute 或 fixed
overflow 的值不为 visible
display 的值不为 inline-block 、flex、inline-flex
1.2、BFC的特性
内部的 box 会在垂直⽅向,⼀个接⼀个的放置。
box 垂直⽅向的距离由 margin 决定,属于同⼀个 BFC 的两个相邻 box 的 margin 会发⽣重叠
BFC 的区域不会与浮动区域的 box 重叠
BFC 在页⾯上是⼀个独⽴的容器,外⾯的元素不会影响 BFC 内的元素,⾥⾯的⼦元素也不会影响外边元素。
计算 BFC 的⾼度时,浮动元素也会参与计算
1.3、BFC 的作⽤
取消盒⼦的 margin 塌陷
清除内部浮动,不会影响外⾯元素,可以阻⽌元素被浮动元素覆盖。
⼆、两栏布局,有⼏种实现⽅式?
常见的有 5 种⽅式,分别为:
flex 布局
grid 布局
圣杯布局
双飞翼布局
系统的浮动布局
2.1、使⽤ flex 布局
使⽤ flex 布局,是⽬前主流的⽅式。
实现⽅式:⽗容器设置 display:flex,定宽元素设置 width,⾃适应的⼦元素设置 flex:1 或 flex-grow:1。
2.2、使⽤ grid 布局
实现⽅式:⽗级元素设置 display:grid ,使⽤ grid-template-columns 和 grid-template-rows 设置格⼦,⼦项设置 grid-column 和 grid-row 设置在格⼦中的位置。IE 不⽀持这种,如果项⽬需要兼容 IE 浏
览器,就不能选它了。
2.3、圣杯布局
实现⽅式:定宽元素和⾃适应元素都设置左浮,⾃适应元素设置宽度 100% ,定宽元素设置固定宽度,定宽元素因为 DOM 位置靠后被挤下去,给定宽元素设置 margin-left:-100% 此时定宽元素和⾃适应元素左侧重叠,给容器设置 padding-left 的值为定宽元素宽度,给定宽元素设置定位和固定宽度。
圣杯布局本质上利⽤了浮动和负 margin 的特性,同时也有⼀个要求,⾃适应元素的宽度最⼩不能⼩于固定宽度侧边栏的宽度,否则会出现错乱。
2.4、双飞翼布局
解决了圣杯布局⾃适应元素宽度⼩于固定宽度侧边栏时出现错乱的问题。
实现⽅式:给⾃适应元素内再多加⼀层 div ,定宽元素和⾃适应元素都设置左浮,⾃适应元素宽度 100% ,定宽元素设置宽度,margin-left:-100% ,此时定宽元素和⾃适应元素左侧重叠,给⾃适应元素内的 div 加 margin 来规避重叠。
2.5、系统的浮动布局
实现⽅式:定宽元素左浮或右浮,⾃适应的元素设置 margin 预留空间,为避免⽗元素⾼度塌陷,需要给⽗级元素加清除浮动。
该⽅式对 DOM 的结构顺序有⼀定的要求,布局⽅式较⽼,现在基本都不⽤了。
三、什么是 css reset ?
它的全称就是 reset.css ,是⼀个 css ⽂件,⽤来重置浏览器默认的 css 样式。
reset 被⼤⼚基本都给抛弃了,什么原因呢?
性能差,使⽤ resst.css ⽂件,会把使⽤到和使⽤不到的样式⽂件都加载进来,出现代码冗余,所以被⼀起企业已经抛弃了。
normalize 与 reset.css ⼀样,是⼀个样式的重置库。主要是为了增强跨浏览器渲染的⼀致性。
四、⽹页中应该使⽤奇数还是偶数的字体?为什么呢?
答案是:偶数。
原因:
偶数让⽂字在浏览器上更好看。
ui 给前端的设计图⼀般都是偶数,这样不管布局也好,转换 px 也好,会⽅便⼀些。
感兴趣了,⼤家⼀个左右对称的⽂字,⽐如"中"、“⼗”设置⼀个偶数⼀个奇数,观察下。
五、css 优先级算法,如何计算?
总结性地回答:
选中且设置 !important 的 > 权重⾼的 > 权重相同位置靠后的 > 来⾃继承的。
如果两组选择器都定位到同⼀元素,且对同⼀属性设置不同的样式,则需要分别计算两组选择器的权重来确定优先级。
⼀个选择器的优先级可以由四部分计算得分:
千位:如果声明在 style 的属性⾥,则该部分得⼀分。
百位:选择器包含 id 选择器,则该位得⼀分。
⼗位:选择器包含类、属性选择器和伪类,则该位得⼀分。
个位:选择器包含标签、伪元素选择器,则该位得⼀分。
⾯试题:
<style>
.box h1#title { color:red }
#box h1.title { color:blue }
</style>
<div id="box" class="box">
<h1 id="title" class="title">爱学习的前端⼈</h1>
</div>
答案是:蓝⾊!
六、css 盒模型是啥?
⽹页中每个元素都占有⼀定的空间,可以看成盒⼦,这个盒⼦的组成有:外边距、元素的边框、元素的内边距、元素的内容,这四个部分⼀起构成了盒⼦模型。
css 的盒⼦模型分为两种:标准盒⼦模型和 IE盒⼦模型。
6.1、两种盒⼦模型的区别:
标准盒⼦模型的内容有:margin、border、padding、content。
它的 width ⼀般只包含内容,不包含 padding border 和 margin 。盒⼦的⼤⼩会以内容优先,⾃动扩展,⼦元素可以撑开⽗元素。
(标准)盒⼦总宽度 = margin + border + padding + width
IE盒⼦模型的内容有:margin、content (padding + border + content )
IE 盒⼦中⼦元素⽆法撑开⽗元素的盒模型,元素的宽度实际上包含了 content 、padding 和 border 。所以:
(IE)盒⼦总宽度 = margin + width
6.2、通过 css 如何转换呢?
使⽤ box-sizing 属性可以任意转换盒⼦模型。具体的属性值有:
1、content-box :定义盒⼦为标准盒⼦模型,也是默认值。
2、border-box :定义盒⼦为 IE 盒⼦模型。
3、inherit :规定从⽗元素继承 box-sizing 属性的值。
通过 box-sizing 属性,可以将标准盒⼦模型和 IE 盒⼦模型之间进⾏任意转换。
七、⼀个盒⼦不给宽⾼,⽔平垂直居中⽅式有⼏种?
共有 6 种⽅式,分别为:
1. flex 布局。实现⽅式为 display:flex 、align-item:center 和 justify-content:center 。
2. flex 布局的另外⼀种实现⽅式是 display:flex 和 margin:auto。
3. grid 布局其中⼀种实现⽅式为 display:grid 、align-item:center 和 justify-content:center 。
4. grid 布局另外⼀种实现⽅式是 display:grid 和 margin:auto。
5. table-cell。实现⽅式为 display:table-cell 、vertical-align:middle 和 text-align:center 。
6. translate + 绝对定位。实现⽅式为相对和绝对定位相结合,绝对定位的元素添加 left:50%、 top:50% 和 transform:translate(-50% , -
50%)。
⼋、css 中的单位有哪些?以及它们之间的区别。
css 中的单位共有 15 种。它们可分为两⼤类:
绝对长度:cm、mm、in、px、pt、pc。
相对长度:ex、ch、em、rpx、rem、vw、vh、vmin、vmax、% 。
它们之间的介绍以及区别:
1、px:像素,是⽹页内常⽤的单位,也是基本单位。常听到的电脑像素是 1024*768 ,表⽰的就是⽔平⽅向 1024 个像素点,垂直⽅向 768个像素点。
2、rpx:是⼩程序解决⾃适应屏幕尺⼨的尺⼨单位,⼩程序规定的屏幕宽度为 750rpx 。rpx 单位可以根据屏幕进⾏⾃动适应。
3、em:默认字体⼤⼩的倍数。1em 的值并不是固定的,需要根据⽗级元素字体⼤⼩确定。
场景1:字体设置 font-size:2em ,字体⼤⼩继承⽗级元素的字体⼤⼩(默认⼤⼩是16px)的2倍。
场景2:元素的 width:2em ,这⾥默认的字体⼤⼩是⾃⾝元素的字体⼤⼩,所以宽度是⾃⾝元素字体⼤⼩的 2 倍。
4、rem:是相对于根元素 html 。这就意味着,我们只需要设置根元素字体⼤⼩,就可以把整个页⾯进⾏按⽐例调整。移动端适配这种⽅法挺常见的。
5、% :百分⽐⼀般来说都是相对于⽗级元素的。
css 的新单位:
6、vw:view width 的简写。 1vw 代表浏览器视⼝宽度的 1% 。如:浏览器的宽度为 1200px ,则 1vw = 12px。
7、vh:view height 的简写。1vh 代表浏览器视⼝⾼度的 1% 。如浏览器⾼度 900px ,则 1vh = 9px。
8、vmin:相对单位,当前 vw 和 vh 中较⼩的⼀个值,其中较⼩的被分为 100 份。
9、vmax:当前 vw 和 vh 中较⼤的⼀个值。其中较⼤的值被分为 100 份。
如浏览器视⼝⼤⼩为:1200*900px ,则 1vmax = 900/100 = 1px。兼容性差,所以⽤的⽐较少。vmin 同理。
cm、mm、in(英⼨)、pt(点)、pc(派卡)这些单位在 CSS 中基本不怎么使⽤。
九、如何实现 0.5px 边框?
实现⽅法有 4 种,分别为:
9.1、利⽤缩⼩视觉上是 0.5px 。
实现:给容器设置伪元素,设置绝对定位,宽⾼是 200% ,边框为 1px ,然后缩⼩元素为50%,视觉上实现 0.5px 。
特点:兼容性较好,能够使⽤圆⾓,推荐使⽤。
9.2、利⽤线性渐变实现。
实现:给容器设置伪元素,设置绝对定位,⾼度为 1px ,添加背景为线性渐变,⼀半有颜⾊,⼀半没有颜⾊,视觉上只有 0.5px 。
特点:适合设置⼀条边框,⽆法展⽰圆⾓。
9.3、⽤阴影实现。
实现:⽤阴影代替边框,设置阴影为:box-shadow: 0 0 0 0.5px #000 。
特点:使⽤⽅便,也能够正常展⽰圆⾓,但是兼容性⼀般。
9.4、直接设置 box-width:0.5px 。
特点:使⽤⽅便,但是兼容性差。
⼗、什么是响应式图像?
在响应式的流⾏下,很多 web 应⽤兼容⼿机平板电脑,其中最头疼的就是图⽚了,不同平台使⽤⼀张⾼清图,不但浪费流量,还影响加载速度,所以就有了响应式图像,根据分辨率、设备像素⽐、屏幕⽅向等来加载合适的图⽚,在保证图⽚清晰的情况下,让图⽚尽可能⼩。
解决⽅案:
媒体查询:该⽅案只适⽤于根据⼤⼩设置不同的背景图⽚,对于动态图⽚,如 banner 和产品图等,处理起来显的⽆能为⼒。
srcset:可以设置通过不同的 DPR 或者不同的屏幕分辨率,选择对应的或者⼤⼩最接近的图⽚。
sizes:告诉浏览器图⽚的实际显⽰尺⼨, html 解析时浏览器能够⾃动算出需要请求的对应图⽚
⼗⼀、height 与 line-height 的区别
接下来我们就细细分析下它们之间的区别有哪些?
定义不同:line-height 设置每⾏⽂字所占的⾼度,height 元素⾃⾝的⾼度。就是你理解的⾏⾼和⾼度。
同为⾼度时,表⽰的意义不同。对于块级元素,设置 line-height 时,⾼度会被内容⾃动撑开,此时⾼度就是⾏⾼和⼏⾏内容共同决定的,即:height = line-height * ⾏数,⽽ height 设置的是⼀个固定值,与内容⽆关。
使⽤对象不同:line-height ⼀般是针对字体来设置,height 与 line-height 相同时,⽂字会垂直居中,height 是设置元素⾼度的。
使⽤范围不同:line-height 针对有⽂字的任意元素,height 针对块级元素,⾏级元素会失效。
数值⼤⼩关系:line-height 与 height 同时设置时,它们之间的⼤⼩关系,对布局的影响:line-height = height 时,单⾏⽂字居中,多⾏⽂本会超出元素范围。或 line-height > height 时,⽂本会溢出元素范围。
⼗⼆、css 绘制三⾓形
绘制三⾓形在项⽬中⾮常常见,总是记不住绘制的时候到底哪个是有颜⾊的,其他的透明,今天给⼤家总结⼀个规律。
下图是⼀个⼤⼩为0,设置了四个不同颜⾊的边框的正⽅形:
可以归纳出:
⽅向朝下的三⾓形,上边框有颜⾊,其他三个边框为透明⾊。
⽅向朝上的三⾓形,下边框有颜⾊,其他三个边框为透明⾊。
⽅向朝左的三⾓形,右边框有颜⾊,其他三个边框为透明⾊。
⽅向朝右的三⾓形,左边框有颜⾊,其他三个边框为透明⾊。
web前端开发笔试题库简单点就是:朝下上有,朝上下有,朝右左有,朝左右有。
⼗三、移动端如何适配?
关于移动端适配的常见⽅案:
媒体查询的⽅式,即 css3 的 media 。
flex 或 grid 的弹性布局。
viewport 缩放
动态 rem ⽅式
vw 适配⽅案
适配⽅案对⽐:
1、媒体查询
该⽅式⽐较⽼,要写很多的样式,写起来⿇烦还不好⽤,基本没⼈⽤了。
2、flex 或 grid 布局
该⽅案基本不需要适配。
常见布局就是⽔平排列和两栏布局
不需要使⽤ JS
3、viewport缩放⽅案
适配原理简单
需要使⽤JS
直接使⽤设计稿标注⽆需换算
⽅案死板只能实现页⾯级别整体缩放
4、动态REM⽅案
适配原理稍复杂
需要使⽤JS
设计稿标注的px换算到CSS的rem计算简单
⽅案灵活技能实现整体缩放⼜能实现局部不缩放
5、vw⽅案
适配原理简单
不需要JS即可适配
设计稿标注的px换算到CSS的vw计算复杂
⽅案灵活技能实现整体缩放⼜能实现局部不缩放
实践是检验真理的唯⼀标准,看完如果不懂的技术⼿动敲⼀敲加深印象。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。