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

覆水难收的感觉出现了

已于 2023-03-16 23:21:07 修改

阅读量592

点赞数 1

文章标签： css 前端 css3 Powered by 金山文档

于 2023-03-16 00:01:03 首次发布

本文链接：https://blog.csdn.net/weixin_45784511/article/details/129573974

版权

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;
        }