收集的前端面试题 - CSS 篇

CSS 世界

  • CSS 选择器 ⭐
    • 有哪些
    • 优先级
  • CSS 单位有哪些
  • 对盒模型的理解 ⭐
  • 有哪些方式（CSS）可以隐藏页面元素（以及区别）
  • 水平垂直居中的方式有哪些 ⭐
  • CSS 的定位方式
  • 如何理解 z-index
  • 如何理解层叠上下文
  • 清除浮动有哪些方法
  • 对 css-sprites 的理解
  • 对媒体查询的理解
  • 标准盒模型和怪异盒模型有什么区别
  • 对 BFC（Block Formatting Context，块级上下文）的理解
  • 为什么有时候用 translate 来改变位置而不是定位
  • 伪类和伪元素的区别
  • 对 flex 布局的理解 ⭐
    • flex 是什么属性的缩写
    • flex: 1 是什么意思
  • 关于 CSS 的动画与过渡问题
  • 说说设备像素，css像素，设备独立像素，dpr，ppi之间的区别？
  • link 和 @import 的区别
  • 实现 div 高度永远是宽度的一半
  • CSS 实现自适应正方形、等宽高比矩形
  • 实现两栏布局的方式
  • 实现三列布局的方式
  • CSS 动画有哪些
  • BFC 与 IFC 区别
  • 两个div上下排列，都设margin，有什么现象？
  • PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种（算工程化内容）

CSS 选择器

有哪些

  • 元素选择器（Element Selector）
    选择指定元素类型的所有元素，例如p选择所有段落元素。
  • 类选择器（Class Selector）
    选择具有指定类名的元素，使用”.”符号表示，例如.class选择所有具有class为”class”的元素。
  • ID选择器（ID Selector）
    选择具有指定id的唯一元素，使用”#”符号表示，例如#myId选择id为”myId”的元素。
  • 属性选择器（Attribute Selector）
    选择具有指定属性或属性值的元素，例如[type=”text”]选择所有type属性值为”text”的元素。
  • 后代选择器（Descendant Selector）
    选择指定元素的后代元素，使用空格分隔，例如div p选择所有div元素内部的p元素。
  • 直接子元素选择器（Child Selector）
    选择指定元素的直接子元素，使用”>”符号表示，例如div > p选择所有div元素的直接子元素p。
  • 伪类选择器（Pseudo-class Selector）
    选择具有特定状态或行为的元素，例如:hover选择鼠标悬停的元素。
  • 伪元素选择器（Pseudo-element Selector）
    选择元素的特定部分，例如::before选择元素的前面插入内容。

优先级

!important > 内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  • A 的值等于 1 的前提是存在内联样式, 否则 A = 0;
  • B 的值等于 ID选择器 出现的次数;
  • C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
  • D 的值等于 标签选择器 和 伪元素 出现的总次数 。

就比如下面的选择器，它不存在内联样式，所以A=0,不存在id选择器B=0,存在一个类选择器C=1,存在三个标签选择器D=3，那么最终计算结果为: { 0, 0, 1 ,3 }

1
2
3
ul ol li .red {
  ...
}

按照这个结算方式，下面的计算结果为: { 0, 1, 0, 0 }

1
2
3
#nav {
  ...
}

我们的比较优先级的方式是从 A 到 D 去比较值的大小，A、B、C、D 权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。

比如第二个例子的 B 与第一个例子的B相比，1 > 0,接下来就不需要比较了，第二个选择器的优先级更高。

CSS 单位有哪些

  • px（像素）：最常用的单位，相对于显示器屏幕的一个像素。
  • **%**（百分比）：相对于父元素的百分比。
  • em：相对于当前元素的字体大小。
  • rem：相对于根元素（html 元素）的字体大小。
  • vw：视口宽度的百分比，1vw 等于视口宽度的 1%。
  • vh：视口高度的百分比，`1vh 等于视口高度的 1%。

对盒模型的理解 ⭐

CSS盒模型是指在网页布局中，每个元素可以看作一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距。盒模型的组成部分包括：

alt text

  • 内容区域（content area）：显示元素的实际内容，比如文本、图片等。
  • 内边距（padding）：内容区域与边框之间的空白区域，可以通过padding属性进行设置。
  • 边框（border）：内边距和外边距之间的边界，可以通过border属性进行设置。
  • 外边距（margin）：边框与相邻元素之间的空白区域，可以通过margin属性进行设置。

在标准的盒模型中：

alt text

元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

怪异盒模型(IE) 盒子：

alt text

元素的宽度 = margin-left + width + margin-right

虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing。

1
2
3
box-sizing: content-box // 标准盒模型
box-sizing: border-box // 怪异盒模型
box-sizing: padding-box // 火狐的私有模型，没人用
  • link 属于 XHTML 标签，而 @import 是 CSS 提供的。
  • 页面被加载时，link 会同时被加载，而 @import 引用的CSS会等到页面被加载完再加载。
  • import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题。
  • link 方式的样式权重高于 @import 的权重。
  • 使用 DOM 控制样式时的差别。当使用 JS 控制 DOM 去改变样式的时候，只能使用 link 标签，因为 @import 不是 DOM 可以控制的。

为什么有时候用 translate 来改变位置而不是定位

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。

而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

扩展阅读：CSS3 3D transform变换-张鑫旭

对 flex 布局的理解

web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局

具体用法移步阮一峰的 flex语法、flex实战，讲得非常通俗易懂，而且我们一两句话说不清楚。

flex 是什么属性的缩写

在 CSS 中，flex 是 flex-grow、flex-shrink 和 flex-basis三个属性的缩写。

  • flex-grow: 定义了元素的放大比例，默认为 0，即如果存在剩余空间，也不放大。
  • flex-shrink: 定义了元素的缩小比例，默认为 1，即如果空间不足，该元素将缩小。
  • flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。它可以是一个长度值（如 200px），也可以是一个百分比（如 30%），还可以是一个关键字如 auto（表示根据自身内容大小确定）或 content（表示根据内容大小自适应）。

flex: 1 是什么意思

flex 是 flex-grow、flex-shrink 和 flex-basis 的缩写。当设置 flex: 1 时，它相当于以下设置：

  • flex-grow: 1，表示当有剩余空间时，该元素应该扩大以占据剩余空间。如果有多个元素都设置了 flex-grow: 1，它们将按照比例分配剩余空间。
  • flex-shrink: 1，表示当空间不足时，该元素应该缩小以适应容器。
  • flex-basis: 0%，表示初始大小为零，即不占用固定的空间，完全由弹性布局来决定其大小。

关于 CSS 的动画与过渡问题

深入理解CSS动画animation

深入理解CSS过渡transition