2023春招CSS面试题（更新中...）

1、说一下CSS盒模型

在HTML页面中的所有元素都可以看成是一个盒子。

盒子的组成：content 、padding、border、margin

盒模型的分类：（根据盒子大小的计算方式分类）

• 标准盒模型：给盒子设置设置width和height，设置的是content的宽高，

盒子的实际大小 = 设置的宽高+padding+border

• 怪异盒模型:给盒子设置的width和height包含了padding和border，设置的就是盒子的实际大小

控制盒模型的模式：

• box-sizing:content-box 标准和模型（默认值）

• box-sizing:border-box 怪异盒模型

2、CSS选择器的优先级

（1）CSS的特性：继承性、层叠性、优先级

• 继承性：字标签继承父标签的样式

• 层叠性：样式发生冲突的时候怎么选择

• 优先级：不同标签或者不同选择器发生冲突的时候，怎么去解决样式的问题

（2）优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式 （3）选择器:标签、类/伪类/属性、全局选择器、行内样式、id、!important

排序：!importtant >行内样式 >id>类/伪类/属性 >标签 >全局选择器

3、隐藏元素的方法有哪些

(1)dispaly:none;

元素在页面上消失，不占据空间

(2)opacity:0;

设置元素的透明度为0，元素不可见，占据空间位置

(3)visibility:hidden;

让元素消失，占据空间位置，一种不可见的状态

(4)position:absolute;

把元素从当前位置给踢出去

(5)cli-path

把元素剪切掉

4、px和rem的区别是什么

(1)px是像素,绝对长度单位，它的大小取决于屏幕的分辨率，是开发中常用的单位

(2)rem:相对长度单位，相对于根元素的字体大小，给html根节点设置font- size:62.5%

(3)em：相对长度单位，在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，比如width。如果当前元素的字体尺寸未设置，由于字体大小可继承的原因，可以逐级向上查找，最终找不到则相对于浏览器默认字体大小。在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。原理是通过媒体查询或flexible.js能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素的字体大小，页面中的其他元素的尺寸就会自动跟着修改。

(4)vw：相对长度单位，相对于视窗宽度的1%，

由于vw被更多浏览器兼容之后，在做移动端响应式页面的时候，通常使用vw配合rem，原理是使用vw设置根元素html的字体大小，当窗口大小发生改变，vw代表的尺寸随着修改无需加入

(5)vh：相对长度单位，相对于视窗高度的1%。

5、重绘重排有什么区别

（1）重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小；

（2）重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器会根据每个盒模型的特性进行绘制；

（3）浏览器的渲染机制：

• 对DOM的大小、位置进行修改之后，浏览器需要重新计算元素的这些几何属性，就叫重排；

• 对DOM的样式进行修改，比如color、background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘。

• 怎么触发重排？ 删除、添加一些DOM元素，用js修改了一些DOM元素的 位 置、大小，内容发生了改变

• 怎么触发重绘？ 颜色的修改、文本的修改、阴影的修改

6、让一个元素水平垂直居中的方法有哪些

(1)定位+margin

父元素固定宽高、相对定位，子元素固定宽高、绝对定位、上下左右设置为0，margin设置为auto,就可以实现子元素相对父元素水平垂直居中

(2)定位+transform

父元素相对定位，子元素绝对定位，先将元素的左上角定位到页面的中心，就是top和left设置为50%,再通过translate调整元素自身的中心点，设置transform:translate（-50%，-50%）

(3)flex布局

设置父元素为弹性盒子：display:flex;然后设置父元素和盒子内部子元素水平垂直都居中，justify-content:center; align-items:center;

.farther{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: pink;
}
.son{
  background-color:green
}

(4)grid布局

设置父元素为网格元素：display:grid;设置justify-content:center; align-items:center;

.father{
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: #786;
}
.son{
  background-color: pink;
}

(5)table布局

设置父元素为表格元素，display:table-cell,设置其内部元素水平垂直都居中：text-align:center;vertical-align:middle;设置子元素为行内块：diaplay:inline-block

.father{
            width: 400px;
            height: 300px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            background-color: #786;
        }
        .son{
            display: inline-block;
            background-color: pink;
        }

7、CSS的哪些属性可以继承，哪些不可以继承？

CSS的三大特性：继承、层叠、优先级。

继承：子元素可以继承父元素的样式，被动性

（1）字体的一些属性：font

（2）文本的一些属性：line-height

（3）元素的可见性：visibility:hidden

（4）表格布局的属性：border-spacing

（5）列表的属性：list-style

（6）页面样式属性：page

（7）声音的样式属性

8、有没有用过预处理器

预处理器语言增加了变量、函数、混入等强大的功能

SASS LESS

9、说一下浮动

（1）浮动的作用：设置了浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

（2）设置浮动元素的特点：脱离文档流，容易造成盒子塌陷，会影响其他元素的排列

（3）解决塌陷问题：

• 给父元素设置overflow:hidden

• 给父元素设置高度

• 建立空白标签添加clear

• 在父级添加伪元素::after{content:' ';clear:both;display:table}

10、说一说BFC

（1）定义：块级格式化上下文，是Web页面中一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

（2）开启BFC的条件（形成BFC的条件）：

• 浮动

• position是absolute或者fixed（绝对定位或固定定位）

• overflow不是visible(比如hidden、scroll、auto)

• display是flex或者inline-block

（3）BFC的用途（BFC主要解决的问题）

• 清除浮动（为父元素开启BFC可以清除子元素的浮动）

• 父元素高度塌陷

• margin重叠（外边距重叠）

（4）BFC元素具有的特性

• 盒子从顶部开始垂直地一个接一个排列

• 盒子垂直方向的距离由margin决定，同一个BFC的两个相邻盒子的margin会重叠

• BFC中,margin-left会触碰到border-left(对于从左至右的方式反之)

• BFC区域不会与浮动的盒子产生交集，而是紧贴边缘浮动

• 计算BFC高度时，自然会检测浮动的盒子高度