号用于每日更新前端最新面试题，React、Vue、小程序、JavaScript、HTML5、CSS、uniapp、ES6、前端工程化、性能优化等热点面试题~~~

欢迎关注，面试题刷起来~~升职加薪不是梦~~

以下是一些常见的前端面试题和答案，涉及 CSS 的主题：

1. 请解释一下 CSS 盒模型。
   答案：CSS 盒模型是用来描述元素在页面中占据空间的方式。它由内容区域、内边距、边框和外边距组成。
2. 请解释一下 CSS 选择器的优先级。
   答案：CSS 选择器的优先级是用来确定哪个规则应用于特定的元素。它由选择器的特殊性、重要性和源代码顺序决定。
3. 请解释一下 CSS 清除浮动。
   答案：清除浮动是一种技术，用于处理浮动元素引起的父元素高度塌陷的问题。常见的清除浮动的方法包括使用空元素清除浮动、使用 clearfix 类、使用伪元素等。
4. 请解释一下 CSS 伪类和伪元素的区别。
   答案：CSS 伪类用于选择处于特定状态的元素，如:hover、:active；而伪元素用于创建元素的特定部分，如::before、::after。
5. 请解释一下 CSS 相对定位和绝对定位的区别。
   答案：相对定位是相对于元素在正常文档流中的位置进行定位，它不会影响其他元素的布局；绝对定位是相对于最近的已定位祖先元素进行定位，或者如果没有已定位的祖先元素，则相对于初始包含块进行定位。
6. 请解释一下 CSS 选择器的子代选择器和后代选择器的区别。
   答案：子代选择器（>）选择作为某个元素直接子元素的元素；后代选择器（空格）选择作为某个元素后代的所有元素，无论它们是直接子元素还是更深层次的子元素。
7. 请解释一下 CSS 中的层叠上下文（stacking context）。
   答案：层叠上下文是指在 HTML 文档中的一个三维概念，它决定了元素在 z 轴上的显示顺序和如何相互堆叠。层叠上下文可以通过特定的 CSS 属性（如position、z-index）创建。
8. 请解释一下 CSS 中的浮动（float）属性。
   答案：浮动是一种布局方式，用于将元素从正常的文档流中移动并使其根据浮动方向对齐。浮动元素会影响周围元素的布局。
9. 请解释一下 CSS 中的盒子模型和内容溢出（overflow）属性。
   答案：CSS 盒子模型是用来描述元素的布局方式，内容溢出属性用于控制当元素中的内容超过元素框时如何处理溢出的部分。
10. 请解释一下 CSS 中的媒体查询（media queries）。
    答案：媒体查询是一种在 CSS 中使用媒体类型和特定条件来应用样式的方法。它可以根据设备的特性（如屏幕宽度、像素密度等）动态地调整样式。
11. 请解释一下 CSS 中的盒子阴影（box-shadow）属性。
    答案：盒子阴影属性用于在元素周围创建一个或多个阴影效果。它可以指定阴影的颜色、模糊半径、偏移量等。
12. 请解释一下 CSS 中的动画（animation）属性。
    答案：动画属性用于在元素上创建动画效果。它可以定义动画的关键帧、持续时间、延迟等属性。
13. 请解释一下 CSS 中的弹性布局（Flexbox）。
    答案：弹性布局是一种用于创建灵活的、自适应的布局的 CSS 模块。它通过使用容器和项目的属性来控制元素在主轴和交叉轴上的对齐和分布。
14. 请解释一下 CSS 中的网格布局（Grid）。
    答案：网格布局是一种二维布局系统，用于将页面划分为行和列，并通过使用容器和项目的属性来控制元素在网格中的位置和大小。
15. 请解释一下 CSS 中的响应式设计（Responsive Design）。
    答案：响应式设计是一种设计方法，通过使用媒体查询和流动布局等技术，使网站或应用能够在不同的设备和屏幕尺寸上提供最佳的用户体验。
16. 请解释一下 CSS 中的变量（Variables）。
    答案：CSS 变量是一种用于存储和重用值的机制。它们使用自定义属性（如 --color: red;）来定义，并通过 var() 函数在其他地方引用。
17. 请解释一下 CSS 中的渐变（Gradients）。
    答案：渐变是一种在元素背景或文本中创建平滑过渡效果的方法。它可以是线性渐变（沿着一条直线方向）或径向渐变（从中心向外扩散）。
18. 请解释一下 CSS 中的字体图标（Icon Fonts）。
    答案：字体图标是使用字体文件来显示图标的方法。通过将图标设计为字体字符，并将字体文件引入页面，可以使用 CSS 控制图标的样式和大小。
19. 请解释一下 CSS 中的屏幕阅读器隐藏（Screen Reader Hiding）。
    答案：屏幕阅读器隐藏是一种技术，用于将某些内容隐藏或屏蔽，以使屏幕阅读器用户不会听到或感知到这些内容。
20. 请解释一下 CSS 中的响应式图像（Responsive Images）。
    答案：响应式图像是一种优化图像显示的方法，使图像能够根据设备的屏幕尺寸和分辨率自动调整大小和加载适当的图像版本。常见的实现方法包括使用 srcset 和 sizes 属性。

大学生的学习过程中，遇到难题和疑惑是常有的事情。然而，随着互联网的普及和技术的发展，搜题和学习软件成为了大学生们解决问题的利器。今天，我将向大家推荐几款备受大学生喜爱的搜题和学习软件，帮助我们更好地应对学习和考试的挑战。

1.彩虹搜题

这是微信公众号

是一个公众号，题库还是比较全的，基本上大部分作业和考试的答案都能搜到

下方附上一些测试的试题及答案

1、测定植物样品的淀粉含量时，可以现将淀粉水解呈还原糖，然后测定还原糖的含量，折算成淀粉含量

答案：正确

2、KMnO4滴定C2O42-时，速度由慢到快，这种现象由下列何种原因引起？

A、催化反应 B、自动催化反应 C、?诱导反应 D、?副反应

答案：自动催化反应

3、与股票相比，债券有_______特点

答案：债券投资的风险小于股票,债券的求偿权优于股票,债券代表一种债权债务关系,债券持有人无权参与企业决策

4、沥青瓦的固定方式以钉为主，粘贴为辅

答案：正确

5、《转运汉遇巧洞庭红波斯胡指破鼍龙壳》一则中，文若虚是因卖_______而最终转运。

答案：橘子

6、Excel中对单元格数据排序后，空白单元格总是放在（　　）。

答案：最后

7、如果某种物质的血浆清除率大于125mL/min。表明该物质不仅经过肾小球滤过,还被()分泌

答案：肾小管

8、目前临床使用喉罩的种类包括

A、ProSeal喉罩 B、插管型喉罩 C、Supreme喉罩 D、SLIPA喉罩 E、Aura(可弯曲)和Aura(直弧形)喉罩 此题为多项选择题。

答案：A,B,C,D,E

9、【判断题】理想理想,有利才想;前途前途,有钱才图

答案：错误

10、企业持有的下列投资中，不计提损失准备的是（ ）0

A、交易性金融资产 B、债权投资 C、其他债权投资 D、长期股权投资

答案：交易性金融资产

11、光中继器的作用就是（? ）。

A、对光信号进行放大，补偿光信号的衰减 B、对波形失真的脉冲进行整形 C、把输入的电信号转换为光信号 D、用户信息转换为原始电信号

答案：对光信号进行放大，补偿光信号的衰减#对波形失真的脉冲进行整形

12、企业董事会通过的利润分配方案中拟分配的现金股利，应确认为应付股利。（　）

答案：错误

13、光纤间的连接、光纤与光端机的连接及耦合都离不开对光纤连接器、耦合器等无源器件的使用。

答案：正确

14、最注重汽车安全性的汽车厂商是()汽车公司 A、沃尔沃 B、奔驰 C、通用 D、福特

答案：A

15、?LTE系统上行采用了（ ）多址接入方式。?OFDMA SDMA TDMA SC-FDMA

答案：D

2.超级PDF

一款完全免费好用的在线工具

有各种PDF转换功能，不仅支持图片转PDF，转换效果也很好，不压画质，同时也支持PDF之间的加密，拆分，加水印去水印等，还包含多种文档的格式转换，PDF长图也可以进行操作，网站另外也有图文识别和图片处理的功能

3.Google翻译

可提供简体中文和另外 100 多种语言之间的互译功能，可让您即时翻译字词、短语和网页内容

Google的免费翻译服务

4.菜鸟教程

菜鸟教程是一个完全免费的编程学习软件。

它免费提供了HTML / CSS 、JavaScript 、服务端、移动端、XML 教程、http://ASP.NET 、Web Service 、开发工具、网站建设；每类教程还细分了很多种不同的教程，例如服务端学习教程包括：PHP 教程、Python 基础教程、Python 3 教程、Linux 教程、Java 教程、Ruby 教程、C 语言教程、C++ 教程、Go 语言教程、正则表达式等丰富的编程学习教程

这些日常学习工具的使用不仅可以提高我们的学习效率，还能帮助我们更好地规划时间和管理任务。

言：

最近总结了一些自己做题过程中遇到的易错问题，附带解析，希望对大家有帮助。

1.下面哪些执行结果为true()

A 'foo' == new function(){ return String('foo'); };

B 'foo' == new function(){ return new String('foo'); };

C [] == 0

D ![]

E !0

点击查看答案

答案：B C E

点击查看涉及到的知识点

1.new返回值

2.String()与 new String()区别

3.隐式类型转换

解析：

A 'foo' == new function(){ return String('foo'); };

1. String('foo') => 'foo'
2. new function 的return会判断返回值是否为引用数据类型，如果不是引用数据类型会返回空对象{}，所以new function(){ return String('foo'); }返回{}
3. 'foo' == {} ，{}进行隐式类型转换，{}调用valueOf方法返回{}对象，判断{}不是基本数据类型，继续调用toString()方法，返回'[object Object]'。
4. 'foo' == '[object Object]',返回false

B 'foo' == new function(){ return new String('foo'); };

1. new String('foo');返回String对象。
2. 'foo' == new String('foo'), new String('foo')调用自身valueOf方法，返回'foo'
3. 'foo' == 'foo' 返回 true

C [] == 0

引用数据类型会先转换为String，然后再转换为number

1. 数组会先调用自身toString()方法 [].toString(); => ''
2. 使用Number('')转为数字 Number('') => 0
3. 0 == 0 => true

D ![]

将[]隐式转化为布尔值

1. Boolean([]) => true
2. !true => false

E !0

1. Boolean(0) => false
2. !false => true

Tips:

在==比较时遵循以下原则

1. 如果有一个操作数是布尔值，则在比较相等性之前，将其转换为数值；

2. 如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转换为数值；

3. 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较；

4. 如果有一个操作数是 NaN，无论另一个操作数是什么，相等操作符都返回 false；

5. 如果两个操作数都是对象，则比较它们是不是同一个对象。如果指向同一个对象，则相等操作符返回 true；

6. 在比较相等性之前，不能将 null 和 undefined 转成其他值。

7. null 和 undefined 是相等的。

2.以下哪些事件会在页面加载完成（onload）之前触发？

A readystatechange

B pageshow

C beforeunload

D DOMContentLoaded

点击查看答案

答案：A D

点击查看涉及到的知识点

1.渲染过程

解析

A readystatechange

document有个readyState属性来描述document的状态，当readyState发生变化时会触发readystatechange事件。

loading:文档加载中

interactive：文档加载完毕，此时同样会触发DOMContentLoaded事件

complete：文档以及所引入的图片等资源加载完毕，此时同样会触发load事件

B pageshow

当load事件触发完毕后会触发pageshow事件

C beforeunload

当dom卸载时会触发，浏览器刷新页面、跳转页面、关闭页面时会触发。

D DOMContentLoaded

当dom解析完毕，同步js、css加载完毕时触发，会早于load事件。

Tips：

页面加载渲染简易流程

html解析为DOM，css解析为CSSOM，合并css与dom生成渲染树，布局，并进行渲染

1.浏览器请求html

2.浏览器获取到html

3.浏览器解析html

4.解析到head标签，如果同步js则停止dom解析（等待js下载完毕并执行后继续dom解析），如果是css则不影响dom继续解析（但是影响dom渲染）。

5.进入body标签

1. 如果只有dom则解析dom，同css树合并为渲染树，进行渲染。
2. 如果有外链js，如果是同步js则下载并执行js，此时dom暂停解析，等待js执行完毕后继续解析，解析后生成dom树，并渲染。
3. 如果有js也有css引入，同步js阻塞dom解析，dom等待js下载执行完，dom解析完毕后还需要等待css下载完成，然后dom与cssom合并为渲染树然后渲染。 6.当dom解析完毕

Tips:

浏览器遇到通过src引入外部js时，会先渲染已解析的dom

例：

引入外部js， 遇到script src时会先渲染已解析的dom

test.js

var i = 1000000000
while(i>0){
    i--
}
console.log("解析完成")

html

<h1>Hello</h1>
<script type="text/javascript" src="test.js"></script>
<h1>world</h1>

执行时，页面会先显示Hello，等几秒后会显示world


页面内写的js会阻塞dom解析与渲染
<h1>Hello</h1>
<script type="text/javascript">
 var i = 1000000000
 while(i>0){
     i--
 }
 console.log("解析完成")
</script>
<h1>world</h1>

js执行完后才会显示 Hello world

3.关于这段代码正确的结论是：（）

var F=function(){};

Object.prototype.a=function(){};

Function.prototype.b=function(){};

var f=new F();

A f能取到a，但取不到b

B f能取到a,b

C F能取到b，不能取到a

D F能取到a，不能取到b

点击查看答案

答案：A

点击查看涉及到的知识点

1.原型

解析：

一. f能访问那些

1. f的__proto__指向的是F构造函数的prototype。
2. 属性查找是通过原型链查找的。
3. f.__proto__ = F.prototype ,F.prototype.__proto__ = Object.prototype，Object.prototype.__proto__ = null。
4. f可以获取到a。

二. F能访问那些

1. F.proto = Function.prototype。所以F能访问到b
2. Function.prototype.proto = Object.prototype。所以F能访问a。
3. 结论，F能访问a跟b。

4.以下结果里，返回 false 的是？

A [] == true

B !![]

C NaN == NaN

D null == undefined

点击查看答案

答案：A C

点击查看涉及到的知识点

1.隐式类型转换

解析：

A [] == true

如果有一个操作数是布尔值，则在比较相等性之前，将其转换为数值；

1. [] == Number(true) => [] == 1
2. [].toString() == 1 => '' == 1
3. Number('') == 1 => 0 == 1
4. false

B !![]

1. Boolean([]) => true
2. !true => false
3. !false => true

C NaN == NaN

如果有一个操作数是 NaN，无论另一个操作数是什么，相等操作符都返回 false；

1. false

D null == undefined

null 和 undefined 是相等的。

1. true

5.下面的代码将返回：

Number(null);

A Null

B 0

C undefined

D 1

点击查看答案

答案：B

点击查看涉及到的知识点

1.Number函数的用法

解析：

1. Number(null) => 0
2. Number(undefined) => NaN
3. Number(123a) => NaN

6.假设有如下代码，那么a(10)的返回结果是？（ ）

function a(a)
{
  a^=(1<<4)-1;
   return a;
}

A 5

B 10

C 15

D 16

点击查看答案

答案：A

点击查看涉及到的知识点

1.二进制转换

2.左移运算符

3.异或运算符

解析：

涉及到异或、二进制转换、

1. a^=(1<<4)-1 => a = a ^ ((1<<4) -1);
2. 带入参数 a = 10 ^((1<<4) -1);
3. ((1<<4) -1) 1<<<4 转换为二进制 1000010000 转换为十进制 => 2⁴ => 16((1<<4) -1) => 15
4. 10 ^ 15 10转化为二进制 => 101015转化为二进制 => 111110^15 => 101101 =>转化为10进制 2²+1 => 5
5. 返回5

Tips:

二进制转换为十进制：

除二取余，然后倒序排列，高位补零 例：

10转化为2进制
1.  10%2 = 0
2.  5%2  = 1
3.  2%2  = 0
4.  1    = 1

倒序排列：
1010  

7.假设val已经声明,可定义为任何值。则下面js代码有可能输出的结果为:

console.log('Value is ' + (val != '0') ? 'define' : 'undefine');

A Value is define

B Value is undefine

C define

D undefine

E Value is define 或者 Value is undefine

F define 或者 undefine

G 其它选项都有可能

点击查看答案

答案：C

点击查看涉及到的知识点

1.运算符优先级

解析： 考察运算符优先级，+优先级高于三目运算，上面代码等价于

('Value is ' + (val != '0')) ? 'define' : 'undefine'

8.运行以下程序,y和z的最终结果为:

<script> 
    var m= 1, j = k = 0; 
    function add(n) { 
        return n = n+1; 
  } 
    y = add(m); 
    function add(n) { 
        return n = n + 3; 
    } 
z = add(m); 
</script> 

A 2,4

B 4,4

C 2,2

D 报异常

点击查看答案

答案：B

点击查看涉及到的知识点

1.函数提升

2.值传递

解析：

1. 同名函数会相互覆盖，由于函数存在函数提升，后定义的函数会覆盖之前定义的函数，所以y，z调用的都是第二个add函数。
2. 传入函数的m因为是基本类型，在函数内修改不会影响外部的变量

结尾：

在错题中寻找自己的知识薄弱点，巩固并完善自己的知识体系，建议收藏，经常看看，避免遗忘~