前端面试题之——CSS

发表于 2024-03-22 分类于面试相关，前端面试题阅读时长 ≈ 5 分钟

一面试题汇总

水平居中的方法
垂直居中的方法
如何实现一个自适应的正方形
简要介绍一下flex布局
如何实现两列布局
简要介绍一下CSS3的新特性
如何使用CSS实现硬件加速？
重绘和回流（重排）是什么，如何避免？
说一说你了解的圣杯布局和双飞翼布局？
说一说css3的animation
绝对定位和相对定位的区别？
说一下你了解的CSS选择器？
BFC是什么？介绍一下，如何触发BFC？
CSS3动画如何实现暂停？
说一说你知道哪些伪类选择器？
简要介绍一下一种css预处理器？

二面试题解答(仅供参考)

2.1 水平居中的方法

1.元素为行内元素，设置父元素text-align:center
2.如果元素宽度固定，可以设置左右margin为auto;
3.如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
4.使用flex-box布局，指定justify-content属性为center
5.display设置为tabel-ceil

2.2 垂直居中的方法

1.将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
2.使用flex布局，设置为align-item：center
3.绝对定位中设置bottom:0,top:0,并设置margin:auto
4.绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
5.文本垂直居中设置line-height为height值

2.3 如何实现一个自适应的正方形

1
2
3

利用padding设置为百分比时是相对于父级元素的，
因此同时设置width与padding-top(padding-bottom)为同一个百分数，
并且设置height:0即可实现一个正方形

2.4 简要介绍一下flex布局

Flex布局（Flexible Box Layout）是一种用于在容器中进行布局的现代CSS布局模型。它旨在提供一种更加灵活的方式来排列、对齐和分配空间，以适应各种不同的屏幕尺寸和设备方向。

在Flex布局中，存在两个主要概念：容器和项目。容器是指应用Flex布局的父元素，而项目则是容器内的子元素。

Flex布局的主要特点包括：

主轴和交叉轴：Flex容器具有一个主轴和一个交叉轴。主轴是Flex项目沿着其排列的方向，而交叉轴则是与主轴垂直的方向。
弹性项目：Flex项目具有弹性，它们可以根据需要拉伸或收缩以填充可用空间。这使得在不同的屏幕尺寸和布局环境下保持一致的布局变得更加容易。
容器属性：Flex容器可以使用一系列属性来控制其内部项目的布局，如display（定义为flex）、flex-direction（指定主轴的方向）、justify-content（沿主轴对齐项目）、align-items（沿交叉轴对齐项目）等。
项目属性：Flex项目也可以使用一系列属性来控制其在容器内的布局，如order（定义项目的排列顺序）、flex-grow（指定项目在剩余空间中的放大比例）、flex-shrink（指定项目在空间不足时的收缩比例）等。

使用Flex布局可以简化响应式设计的实现，同时提供更灵活的布局选项。它已经成为Web开发中常用的布局方式之一，得到了广泛的支持和应用。

2.5 如何实现两列布局

1.将元素的display设置为行内元素
2.两个元素全部使用浮动
3.一个元素左浮动，第二个元素不变，同时设置一个margin-left值
4.使用flex-box布局

2.6 简要介绍一下CSS3的新特性

可以对CSS3的新特性做一个简单的分类，
1-在布局方面新增了flex布局，
2-在选择器方面新增了例如:first-of-type,nth-child等选择器， 
3-在盒模型方面添加了box-sizing来改变盒模型，
4-在动画方面增加了animation、2d变换、3d变换等。
5-在颜色方面添加透明、rgba等，
6-在字体方面 允许嵌入字体和设置字体阴影，
7-同时当然也有盒子的阴影，最后还有关键的媒体查询。

2.7 如何使用CSS实现硬件加速？

1
2
3

硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能， 
一般触发硬件加速的CSS属性有transform、opacity、filter，
为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

2.8 重绘和回流（重排）是什么，如何避免？

DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，
其他元素的几何 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，
浏览器将受到影响的部分 重新绘制到屏幕上的过程称为重绘。

引起重排的原因有
1.添加或者删除可见的DOM元素，
2.元素位置、 尺寸、内容改变，
3.浏览器页面初始化，
4.浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，

减少 重绘和重排的方法：
1.不在布局信息改变时做DOM查询，
2.使用cssText或者className一次性改变属性 
3.使用fragment，
4.对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他 元素

2.9 说一说你了解的圣杯布局和双飞翼布局？

圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wing Layout）都是用于创建具有固定头部和底部以及三个主要列的网页布局的方法。它们都旨在实现一种灵活的、响应式的布局，同时确保内容的语义性和可访问性。

1. 圣杯布局：

圣杯布局是由Matthew Levine于2006年提出的一种布局模式，其目的是创建一个具有以下特点的网页布局：

中间列优先渲染，使其内容排在文档流的最前面。
两侧列可以灵活地调整宽度，以适应不同的屏幕尺寸。
实现顶部和底部的固定宽度，使其始终可见。

实现圣杯布局的关键是使用负边距和相对定位，以便将左右列拉到中间列的下方。此外，可以使用浮动或Flexbox等技术来实现。

2. 双飞翼布局：

双飞翼布局是一种基于圣杯布局的改进，由于Luke Roberts于2006年提出。它与圣杯布局类似，但采用了不同的HTML结构和CSS技巧。

双飞翼布局的关键特点是：

使用额外的内部容器来包装主要内容，使得主要内容不受左右列的影响。
通过负边距和相对定位来将左右列移到页面视图的左右侧。
通过使用padding来避免内容与左右列重叠。

相比于圣杯布局，双飞翼布局的HTML结构更加语义化，使得内容更易于维护和理解。

总的来说，圣杯布局和双飞翼布局都是用于创建具有固定头部和底部以及三个主要列的响应式网页布局的方法。它们各有特点和优劣，开发者可以根据具体情况选择适合自己项目的布局方式。

2.10 说一说css3的animation

css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，
keyframes声明了动画的名称，通过from、to或者是百分比来定义 
每一帧动画元素的状态，通过animation-name来引用这个动画，
同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式， 

这些相关的动画子属性有：
animation-name定义动画名、
animation-duration定义动画播放的时长、
animation-delay定义动画延迟播放的时间、
animation-direction定义 动画的播放方向、
animation-iteration-count定义播放次数、
animation-fill-mode定义动画播放之后的状态、
animation-play-state定义播放状态，如暂停运行等、
animation-timing-function 定义播放的方式，如恒速播放、艰涩播放等。

2.11 绝对定位和相对定位的区别？

1
2

绝对定位是相对于最近的已经定位的祖先元素，没有则相对于body，绝对定位脱离文档流，
而相对定位是相对于元素在文档中的初始位置，并且 相对定位的元素仍然占据原有的空间。

2.12 说一下你了解的CSS选择器？

CSS选择器是用于选择HTML或XML文档中特定元素的模式。通过CSS选择器，可以根据元素的标签名、类、ID、属性等特征来选择并应用样式。

以下是一些常见的CSS选择器：

元素选择器（Element Selector）： 通过HTML元素的名称选择元素，如p选择所有段落元素。
类选择器（Class Selector）： 使用类名选择元素，以.开头，如.header选择所有具有header类的元素。
ID选择器（ID Selector）： 使用元素的ID选择特定的元素，以#开头，如#main-container选择具有main-containerID的元素。
后代选择器（Descendant Selector）： 选择嵌套在另一个元素内部的元素，使用空格分隔，如.container p选择所有在类为container的元素内的段落元素。
子元素选择器（Child Selector）： 选择作为另一个元素的直接子元素的元素，使用>符号，如.container > p选择所有作为类为container的元素的直接子元素的段落元素。
相邻兄弟选择器（Adjacent Sibling Selector）： 选择紧接在另一个元素之后的元素，使用+符号，如.container + p选择所有紧接在类为container的元素后的段落元素。
通用选择器（Universal Selector）： 选择所有元素，使用*，如*选择文档中的所有元素。
属性选择器（Attribute Selector）： 根据元素的属性及其值选择元素，如[type="text"]选择所有类型为文本的表单元素。
伪类选择器（Pseudo-class Selector）： 选择元素的特定状态，如:hover选择鼠标悬停在元素上的状态。
伪元素选择器（Pseudo-element Selector）： 选择元素的特定部分，如::before和::after选择元素的前后内容。

这些选择器可以组合使用，以满足复杂的样式需求，并且能够帮助开发者有效地选择和控制页面上的元素，并为其应用样式。

2.13 BFC是什么？介绍一下，如何触发BFC？

BFC也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素。
其中比较重要的布局规则有内部box垂直放置、计算BFC的高度的时候，浮动元素也参与计算。 
触发BFC的规则有根元素、浮动元素、position为absolute或fixed的元素、
display属性为inline-block、table-cell、table-caption、flex、inline-fllex、overflow不为visible的元素。

2.14 CSS3动画如何实现暂停？

1	css3动画可以通过设置animation-play-state属性为paused来设置这个动画暂停。

2.15 说一说你知道哪些伪类选择器？

当涉及到 CSS 伪类选择器时，有很多可以使用的选择器。以下是一些常用的伪类选择器：

:hover：选择器用于选择鼠标悬停在元素上的状态。通常用于创建交互式效果。
:active：选择器用于选择已经被激活的元素，通常是在用户点击元素但尚未释放鼠标按钮时。
:focus：选择器用于选择当前拥有焦点的元素，比如表单元素。
:visited：选择器用于选择已访问过的链接。
:first-child：选择器用于选择元素的第一个子元素。
:last-child：选择器用于选择元素的最后一个子元素。
**:nth-child()**：选择器用于选择元素的指定序号的子元素。例如，:nth-child(odd)选择奇数序号的子元素，:nth-child(even)选择偶数序号的子元素。
**:nth-of-type()**：选择器用于选择指定类型的子元素，与:nth-child()不同，它是基于元素类型而不是序号。
**:not()**：选择器用于选择不满足指定条件的元素。例如，:not(.class)将选择没有指定类的元素。
:empty：选择器用于选择不包含任何子元素或者只包含空白内容的元素。
:checked：选择器用于选择已被选中的表单元素，比如复选框或单选按钮。
:disabled：选择器用于选择已被禁用的表单元素。

这些是一些常见的 CSS 伪类选择器，它们可以帮助开发者根据元素的状态或结构来选择并应用样式，从而实现更丰富的页面效果和交互体验。

2.16 简要介绍一下一种css预处理器？

CSS预处理器是一种工具或语言，允许开发者使用类似于编程语言的语法来编写CSS代码，并将其编译成普通的CSS文件。这种预处理器扩展了CSS的功能，提供了一些额外的特性和工具，如变量、嵌套规则、混合、函数等，使得CSS代码更加模块化、可维护和可重用。

主要的CSS预处理器包括：

Sass（Syntactically Awesome Stylesheets）： Sass是一种成熟且功能强大的CSS预处理器，提供了丰富的功能，如变量、嵌套规则、混合、继承等。Sass有两种语法格式：SCSS（Sassy CSS）和缩进式语法。SCSS语法更接近于传统的CSS语法，而缩进式语法更简洁，类似于Python。
Less： Less是另一种流行的CSS预处理器，类似于Sass，它提供了变量、嵌套规则、混合等功能。Less的语法与普通的CSS更为接近，使得开发者更容易上手。
Stylus： Stylus是一种简洁灵活的CSS预处理器，它具有简洁的语法和强大的功能，支持变量、嵌套规则、混合等。Stylus的语法非常灵活，允许省略大括号和分号，使得代码更加简洁。

使用CSS预处理器可以提高CSS代码的可维护性和可读性，减少重复代码的量，并使得开发过程更加高效。预处理器可以帮助开发者更轻松地管理样式表，减少错误，并且可以通过编译过程将预处理器语言转换为普通的CSS文件，以确保浏览器能够正确解析和渲染样式。

三参考

FE-Interview—CSS

一 面试题汇总

二 面试题解答(仅供参考)