分享一些我在面试时所遇到的CSS问题 （三）

前言

在前端面试中，CSS是一个非常重要的考察点，因为它是构建网页界面和用户交互的关键技术之一。年也算过完了，又到了春招的时候，这是一个检验成果的阶段，接下来我会陆续分享一下我在面试时所遇到的与CSS有关的问题。祝大家在接下来的春招中取得一个好成绩！

CSS3中新增了哪些属性？

1. 选择器：CSS3 引入了更多的选择器，如属性选择器（attribute selectors）和伪类选择器（pseudo-classes），使得选择元素的方式更加灵活和强大。

• 属性选择器：[attribute="value"]，例如：input[type="text"]。
• 伪类选择器：:hover、:active、:focus，例如：a:hover。

2. box-shadow：用于创建元素的阴影效果，可以通过设置偏移量、模糊半径、颜色等属性来调整阴影的样式和效果。

.box {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

3. background-clip：用于控制背景的绘制区域，可以指定背景绘制在元素的内容区、内边距区还是边框区。

.box {
    background-clip: content-box; /* 绘制背景仅限于内容框 */
}

4. transition：过渡动画允许在元素的状态改变时以平滑的动画效果过渡，您可以定义属性的变化时长、速度曲线等参数。

.button {
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: lightblue;
}

5. transform：用于对元素进行变换，包括旋转、缩放、平移、倾斜等操作，可以创建丰富的视觉效果。

.box {
    transform: rotate(45deg) scale(1.2);
}

6. animation：动画属性允许您创建更复杂和自定义的动画效果，通过关键帧（keyframes）来定义动画的每一帧的样式。

@keyframes slide {
    0% { left: 0; }
    100% { left: 100px; }
}
.box {
    animation: slide 2s infinite alternate;
}

7. 渐变色：CSS3 引入了线性渐变和径向渐变两种渐变方式，可以用来创建平滑过渡的颜色效果，使得背景、边框等元素的样式更加丰富多彩。

.gradient {
    background: linear-gradient(to right, red, yellow);
}

说说回流重绘

是什么

1. 回流（Reflow） ：

   • 回流是指浏览器为了重新渲染部分或全部文档而重新计算元素的位置和几何结构的过程。
   • 当页面布局发生改变时，浏览器需要重新计算元素的位置和大小，然后重新绘制页面。
   • 回流是一种比重绘更加昂贵的操作，因为它涉及到整个页面布局的重新计算。

2. 重绘（Repaint） ：

   • 重绘是指当元素的样式发生改变，但不影响其布局时，浏览器会重新绘制元素的过程。
   • 重绘不涉及到布局的改变，因此它比回流的成本要低。

触发

回流

• 改变窗口大小
• 添加或删除DOM元素
• 改变元素的位置、尺寸、边距、填充等

重绘

改变元素的样式，如颜色、背景色、字体大小等

触发回流必定会发生重绘

祝大家在接下来的春招中取得一个好成绩！

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"