2022最新Web前端经典面试试题及答案——CSS篇

1、2022最新Web前端经典面试试题及答案CSS篇起点低怕什么，大不了加倍努力。人生就像一场马拉松比赛，拼的不是起点，而是坚持的耐力和成长的速度。只要努力不止，进步也会不止。-、谈谈你对BFC的理解及作用。BFC是Block Formatting Context格式化上下文的缩写就是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素。有一个 独立的块级渲染区域该区域有一套渲染规那么来约束盒子的布局,与外部的区域没有关系。如何创立BFCfloat的值不为noneposition 的值为 absolute 或 fixedoverflow 的值不为 visibledisplay 的值不为 i

2、nline-block、flex、inline-flexBFC的特性内部的box会在垂直方向，一个接一个的放置。box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠BFC的区域不会与浮动区域的box重叠BFC在页面上是一个独立的容器，外面的元素不会影响BFC内的元素，里面的子元素也不会影响外边元素。计算BFC的高度时，浮动元素也会参与计算BFC的作用,取消盒子的margin塌陷清除内部浮动，不会影响外面元素，可以阻止元素被浮动元素覆盖。二、两栏布局，有几种实现方式？常见的有5种方式分别为：flex布局grid布局圣杯布局双飞翼布局系统的浮动布局使用f

3、lex布局使用flex布局，是目前主流的方式。实现方式：父容器设置display:flex，定宽元素设置width，自适应的子元素设置flex:1或flex-grow:1。使用grid布局实现方式：父级元素设置 display:grid 使用 grid-template-columns 和 grid-template-rows 设置格子子项设置 grid-column 和 grid-row 设 置在格子中的位置。IE不支持这种，如果工程需要兼容IE浏览器，就不能选它了。圣杯布局实现方式：定宽兀素和自适应兀素都设置左浮,自适应兀素设置宽度100%，定宽兀素设置固定宽度,定宽兀素因为DOM位置靠后

4、被挤下去, 给定宽元素设置margin-left:100%此时定宽元素和自适应元素左侧重叠，给容器设置padding-left的值为定宽元素宽度，给定宽元素设置定 位和固定宽度。圣杯布局本质上利用了浮动和负margin的特性同时也有一个要求，自适应元素的宽度最小不能小于固定宽度侧边栏的宽度,否那么会出现错 乱。双飞翼布局解决了圣杯布局自适应元素宽度小于固定宽度侧边栏时出现错乱的问题。实现方式：给自适应元素内再多加一层div，定宽元素和自适应元素都设置左浮自适应元素宽度100%，定宽元素设置宽度，margin-left: 100%，此时定宽元素和自适应元素左侧重叠给自适应元素内的div加marg

5、in来规避重叠。系统的浮动布局实现方式：定宽元素左浮或右浮，自适应的元素设置margin预留空间为防止父元素高度塌陷需要给父级元素加清除浮动。该方式对DOM的结构顺序有一定的要求，布局方式较老，现在基本都不用了。三、什么是 css reset ?它的全称就是reset.css，是一个css文件，用来重置浏览器默认的css样式。reset被大厂基本都给抛弃了 ,什么原因呢？性能差，使用resst.css文件会把使用到和使用不到的样式文件都加载进来出现代码冗余，所以被一起企业已经抛弃了。normalize与reset.css 一样，是一个样式的重置库。主要是为了增强跨浏览器渲染的一致性。四、网页中

6、应该使用奇数还是偶数的字体？为什么呢？答案是：偶数。原因：偶数让文字在浏览器上更好看。Ui给前端的设计图一般都是偶数，这样不管布局也好，转换px也好，会方便一些。感兴趣了，大家找一个左右对称的文字，比方中“、“十”设置一个偶数一个奇数，观察下。五、CSS优先级算法，如何计算？总结性地回答：选中且设置limportant的 权重高的 权重相同位置靠后的 来自继承的。如果两组选择器都定位到同一元素，且对同一属性设置不同的样式那么需要分别计算两组选择器的权重来确定优先级。一个选择器的优先级可以由四局部计算得分：千位：如果声明在style的属性里那么该局部得一分。百位：选择器包含id选择器那么该位得一

7、分。十位：选择器包含类、属性选择器和伪类那么该位得一分。个位：选择器包含标签、伪元素选择器，那么该位得一分。面试题：.box h1#title color:red #box hi.title color:blue 爱学习的前端人v/h1答案是：蓝色！六 css盒模型是啥？网页中每个元素都占有一定的空间可以看成盒子，这个盒子的组成有：外边距、元素的边框、元素的内边距、元素的内容这四个局部一 起构成了盒子模型。css的盒子模型分为两种：标准盒子模型和IE盒子模型。两种盒子模型的区别：标准盒子模型的内容有：margin、border、padding、content 它的width 一般只包含内容，不

8、包含padding border和margin。盒子的大小会以内容优先自动扩展，子元素可以撑开父元素。(标准)盒子总宽度=margin + border + padding + widthIE盒子模型的内容有:margin content ( padding + border + content )IE盒子中子元素无法撑开父元素的盒模型元素的宽度实际上包含了content padding和border 所以：(IE )盒子总宽度=margin + width通过css如何转换呢？使用box-sizing属性可以任意转换盒子模型。具体的属性值有：1、content-box :定义盒子为标准盒子模

9、型，也是默认值。2、border-box :定义盒子为IE盒子模型。3、inherit :规定从父元素继承box-sizing属性的值。通过box-sizing属性，可以将标准盒子模型和IE盒子模型之间进行任意转换。七、一个盒子不给宽高水平垂直居中方式有几种？共有6种方式分别为：flex 布局。实现方式为 display:flex 、align-item:center Si justify-content:center。flex布局的另外一种实现方式是display:flex和margin:auto。grid 布局其中一种实现方式为 display:grid x align-item:cent

10、er justify-content:center grid布局另外一种实现方式是display:grid和margin:auto table-cell。实现方式为 display:table-cell 、vertical-align:middle 和 text-align:center translate +绝对定位。实现云式为相对和绝对定位相结合绝对定位的元素添加left:50%、top:50%和transform:translate150% ,- 50%）。八、CSS中的单位有哪些？以及它们之间的区别。css中的单位共有15种。它们可分为两大类：绝对长度:cm、mm、in、px、pt、p

11、c。相对长度：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 :元素的w

12、idth: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中较小的一个

13、值其中较小的被分为100份。9、vmax :当前vw和vh中较大的一个值。其中较大的值被分为100份。如浏览器视口大小为：1200*900px 那么1vmax = 900/100 = 1px。兼容性差，所以用的比拟少。vmin同理。cm、mm、in（英寸）、pt（点）、pc（派卡）这些单位在CSS中基本不怎么使用。九、如何实现0.5px边框？实现方法有4种，分别为：利用缩小视觉上是0.5px。实现：给容器设置伪元素，设置绝对定位，宽高是200%，边框为1px，然后缩小元素为50%，视觉上实现0.5px。特点：兼容性较好能够使用圆角，推荐使用。利用线性渐变实现。实现：给容器设置伪元素设置绝对定位

14、,高度为1px 添加背景为线性渐变，一半有颜色,一半没有颜色视觉上只有0.5px。特点：适合设置一条边框，无法展示圆角。用阴影实现。实现：用阴影代替边框设置阴影为：box-shadow: 0 0 0 0.5px #000。 特点：使用方便,也能够正常展示圆角,但是兼容性一般。直接设置 box-width:0.5px 特点：使用方便，但是兼容性差。十、什么是响应式图像？在响应式的流行下很多web应用兼容手机平板电脑其中最头疼的就是图片了 不同平台使用一张高清图不但浪费流量还影响加载速 度，所以就有了响应式图像，根据分辨率、设备像素比、屏幕方向等来加载合适的图片，在保证图片清晰的情况下，让图片尽可

15、能小。解决方案：,媒体查询：该方案只适用于根据大小设置不同的背景图片，对于动态图片，如banner和产品图等处理起来显的无能为力。srcset :可以设置通过不同的 DPR或者不同的屏幕分辨率选择对应的或者大小最接近的图片。sizes :告诉浏览器图片的实际显示尺寸，html解析时浏览器能够自动算出需要请求的对应图片-、height 与 line-height 的区别接下来我们就细细分析下它们之间的区别有哪些？定义不同：line-height设置每行文字所占的高度 height元素自身的高度。就是你理解的行高和高度。同为高度时,表示的意义不同。对于块级元素，设置line-height时，高度会

16、被内容自动撑开，此时高度就是行高和几行内容共同决定的， 即:height = line-height *行数而height设置的是一个固定值,与内容无关。使用对象不同：line-height 一般是针对字体来设置 height与line-height相同时，文字会垂直居中 height是设置元素高度的。使用范围不同：line-height针对有文字的任意元素- height针对块级元素行级元素会失效。数值大小关系：line-height与height同时设置时它们之间的大小关系,对布局的影响：line-height = height时，单行文字居中,多行文本会超出元素范围或line-heigh

17、t height时文本会溢出元素范围。十二、CSS绘制三角形绘制三角形在工程中非常常见，总是记不住绘制的时候到底哪个是有颜色的其他的透明今天给大家总结一个规律。F图是一个大小为0，设置了四个不同颜色的边框的正方形:可以归纳出：方向朝下的三角形，上边框有颜色,其他三个边框为透明色。方向朝上的三角形，下边框有颜色，其他三个边框为透明色。方向朝左的三角形，右边框有颜色，其他三个边框为透明色。方向朝右的三角形，左边框有颜色，其他三个边框为透明色。简单点就是：朝下上有，朝上下有，朝右左有，朝左右有。十三、移动端如何适配？关于移动端适配的常见方案：媒体查询的方式即css3的media。flex或grid的弹性布局。viewport 缩放动态rem方式vw适配方案适配方案比照：1、媒体查询该方式比拟老要写很多的样式写起来麻烦还不好用，基本没人用了。2、