2022前端基础面试题

CSS/HTML部分

这部分可能会先问你css3和html5都增加了那些新元素，然后扩展着问。

1、css布局方式

1.1 响应式布局

一：媒体查询
使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。

二：百分比%
比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

三：vw/vh
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

四：rem
rem单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

五：flex弹性布局
弹性布局只需要依赖于CSS样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

1.2 flex布局

1.3 float布局

1.4 table布局（现在少用）

2、说一下盒子模型（常问）

1.什么是盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：
padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height

2.盒模型能够给我们解决什么问题：

盒子模型主要是针对页面布局的时候来使用，他规范了我们页面的所有所有元素的一个布局规范是由外向内进行布局。

盒模型由外向内：margin（外边距）border（边框）padding（内边距）content（元素）

上面所说的盒模型是w3c的标准的盒子模型，在大多数浏览器上都适用，而还有一种怪异盒子模型，这种怪异模式主要表现在IE内核的浏览器。

3.标准盒子模型和怪异盒子模型（IE的盒模型）

在标准的盒模型中一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width)

答案：122px
如果让 offsetWidth等于100px，该如何做?
box-sizing:border-box;盒子的宽就是内容宽。

而在怪异盒模型中：一个快的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。

4.两种模式的转换（通过box-sizing的方法）

box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式。

当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算；