CSS3面试题
CSS3面试题
基础
什么是CSS3？
CSS3是一种用于描述网页样式的标记语言。
CSS3新增的特性？
CSS3引入了许多新特性，以增强样式控制和交互性。以下是一些CSS3中新增的主要特性：
- 过渡（Transitions）：允许在元素状态之间平滑地过渡。通过指定CSS属性的起始值和结束值，可以创建平滑的动画效果。
- 动画（Animations）：通过关键帧（Keyframes）规则定义动画序列，可以创建更复杂和精细的动画效果。可以控制动画的持续时间、延迟、重复次数等。
- 2D转换（2D Transforms）：提供了对元素进行2D变换的属性，如平移（Translate）、旋转（Rotate）、缩放（Scale）等。可以实现元素在平面内的变形效果。
- 3D转换（3D Transforms）：提供了对元素进行3D变换的属性，如平移（Translate）、旋转（Rotate）、缩放（Scale）等。可以实现元素在三维空间中的变形效果。
- 过滤器（Filters）：提供了一系列图像处理的滤镜效果，如模糊（Blur）、亮度（Brightness）、对比度（Contrast）等。可以实现图像的特殊效果和处理。
- 多列布局（Multi-column Layout）：允许将文本内容以多列的形式进行布局，类似于报纸的排版效果。可以控制列数、间距、分割线等。
- 媒体查询（Media Queries）：允许根据设备的特性和屏幕尺寸应用特定的样式。可以根据屏幕宽度、设备类型、方向等条件调整页面的布局和样式。
- 弹性盒子（Flexbox）：提供了一种灵活的布局模型，用于创建自适应和响应式的布局。可以方便地控制元素在容器中的位置、大小和顺序。
- 网格布局（Grid Layout）：引入了一种二维网格布局模型，用于创建复杂的网格结构。可以定义行和列，并控制元素在网格中的定位和对齐。
- 自定义字体（@font-face）：允许使用自定义的字体文件来显示网页中的文本内容，而不依赖于用户设备上已安装的字体。
CSS3中的选择器有哪些？
CSS3中的选择器有元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。一些常用的选择器包括：通配符选择器（*）、后代选择器（空格）、子元素选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）、类选择器（.class）、ID选择器（#id）、属性选择器（[attr]）等。
CSS3中的伪类和伪元素有什么区别？
CSS3中的伪类用于选择元素的状态或位置，如:hover、:active、:visited、:first-child等，而伪元素则用于选择元素的某个部分，如::before、::after、::first-line、::selection等。
样式
请解释一下CSS3中的变形及其用途。
CSS3中的变形用于实现元素的形状、位置、尺寸等变化，包括旋转、缩放、移动、倾斜、扭曲等。它可以用于创建动画、实现响应式设计、优化用户体验等。
CSS3中的动画是什么？
CSS3中的动画用于实现元素的动态效果，如渐变、旋转、缩放、移动等。常用的动画属性包括：animation-name、animation-duration、animation-delay、animation-fill-mode、animation-iteration-count、animation-direction等。
CSS3中的渐变是什么？
CSS3中的渐变用于实现元素的颜色渐变效果，包括线性渐变和径向渐变。常用的渐变属性包括：background-image、background-repeat、background-position、background-size等。
CSS3中的过渡是什么？
CSS3中的过渡用于实现元素从一种样式转换到另一种样式的效果，如颜色、大小、位置等的过渡。常用的过渡属性包括：transition-property、transition-duration、transition-timing-function、transition-delay等。
布局
请解释一下CSS3中的盒模型及其属性。
CSS3中的盒模型用于描述元素的布局和尺寸，包括内容区域、内边距、边框和外边距。常用的盒模型属性包括：width、height、padding、border、margin等。
请解释一下CSS3中的响应式设计及其用途。
CSS3中的响应式设计是一种用于实现网页在不同设备上自适应的技术，可以根据屏幕大小、分辨率等特征来调整网页的布局和样式。它可以用于提高网页在移动设备上的可用性和用户体验，同时也可以提高开发效率，减少重复的代码。
请解释一下CSS3中的弹性盒子布局（Flexbox）及其用途。
CSS3中的弹性盒子布局是一种用于实现自适应布局的技术，可以根据容器的大小和内容来自动调整子元素的位置和尺寸。它可以用于实现响应式设计、优化用户体验等。
其他
什么是回流和重绘？
回流（reflow）和重绘（repaint）是浏览器渲染页面时的两个关键过程。
回流是指当页面的布局和几何属性发生变化时，浏览器需要重新计算元素的位置和大小，然后重新构建页面的布局树（layout tree）。这个过程涉及到对整个页面或部分页面的重新布局计算，影响范围较大，性能开销较高。常见引起回流的操作包括改变窗口大小、修改元素的尺寸、位置、内容、样式等。
重绘是指当元素的可见样式（如颜色、背景、边框等）发生变化时，浏览器重新绘制（paint）受影响的部分，将新的样式绘制到屏幕上，但不涉及布局的改变。重绘的开销相对较小，因为只需要重新绘制受影响的部分，而不需要重新计算布局。但如果重绘频繁发生，仍然会影响页面的性能。
设备像素、CSS像素、设备独立像素、DPR、PPI之间的区别？
- 设备像素是物理层面上的像素，代表显示设备的最小显示单元。
- CSS像素是在网页布局和CSS样式中使用的虚拟像素单位。
- 设备独立像素是一个与设备显示密度无关的抽象像素单位，用于维持一致的视觉尺寸。
- DPR表示设备像素和设备独立像素之间的比例关系，用于适应不同设备的显示密度。
- PPI表示每英寸内的像素密度，用于描述显示设备的分辨率。
介绍下em, px, rem, vh, vv
em、px、rem、vh和vw是常用的长度单位，用于在网页开发中指定元素的尺寸。它们具有不同的特点和用途：
- px（像素）：像素是最常见的长度单位，表示屏幕上的物理像素。px单位是固定的，不随其他因素的改变而变化。在响应式设计中，通常使用px来指定具体的尺寸，例如字体大小、边框宽度等。
- em：em是相对单位，相对于父元素的字体大小。例如，如果一个元素的字体大小为16px，那么1em等于16px。如果父元素的字体大小改变，那么子元素的em值也会相应地改变。em单位在嵌套的元素中使用，可以实现相对于父元素的尺寸调整。
- rem：rem也是相对单位，但相对于根元素（即html元素）的字体大小。与em不同，rem单位不会受到父元素字体大小的影响。这使得rem在响应式设计中更加方便，因为只需调整根元素的字体大小，整个页面的尺寸都会相应地改变。
- vh（视窗高度）：vh是相对于视窗（浏览器窗口）高度的单位，表示视窗高度的百分比。例如，10vh表示视窗高度的10%。vh单位常用于实现元素相对于视窗的自适应效果，如全屏背景图或占据固定比例的元素。
- vw（视窗宽度）：vw是相对于视窗宽度的单位，表示视窗宽度的百分比。例如，5vw表示视窗宽度的5%。vw单位也常用于实现元素相对于视窗的自适应效果，如水平滚动条的宽度。