考察的知识点

CSS语法和基础概念
- 盒子模型
- CSS选择器
- 属性和值
布局
- 浮动
- 定位
- 弹性布局
- 网格布局
样式优化
- 盒模型
- 背景和边框
- 文字
- 图片
- 字体
动画
- 过渡
- 动画
- 变换
响应式
- 媒体查询
- 移动端处理
CSS预处理器
- Less

面试题汇总

CSS语法和基础概念

谈谈盒子模型？

CSS盒模型，它指的是一种用于描述HTML元素在页面中所占空间的模型。每个HTML元素都被看作是一个矩形的盒子，这个盒子由一个内容区域、内边距、边框和外边距组成。具体来说，CSS盒模型包括以下四个部分：

内容区域（content）：元素里面呈现的内容；
内边距（padding）：内容区域和边框之间的空间；
边框（border）：内容和内边距周围的线；
外边距（margin）：盒子与其周围元素之间的空间。

box-sizing属性的两个取值context-box和border-box是CSS盒模型的两个主要模式。

content-box内容盒：width=内容宽度；
border-box边框盒：width=内容宽度+padding+border。

CSS支持哪些选择器？适用于什么场景。优先级如何？

标签 - body p a. 适用于设置全局样式或者特定标签下的样式
类 - .class-name。适用于多个元素共享某些相同的样式或者模块化开发中相关元素的样式。
ID - #id。适用于单个元素的特殊样式设置或页面滚动到指定内容的锚点跳转。
后代 - div p。适用于对某个容器内的多层元素进行样式设置。
子元素 - div > p。适用于只对直接子元素进行样式设置。
兄弟元素 - div + p。适用于只对某些相邻兄弟元素进行样式设置。
通用 - *。设置全局样式或者对所有元素应用某种共同样式。
伪类 - :hover。用于选中满足特定状态或条件的元素。常见的伪类包括:hover（鼠标悬停）、:active（鼠标点击）和:focus（获得焦点），还有一些其他的伪类，如:first-child（第一个子元素）、:last-child（最后一个子元素）、:nth-child(n)（指定位置的子元素）等。
伪元素 - ::after。用于选中HTML元素的虚拟部分，如::before（在元素之前插入内容）和::after（在元素之后插入内容）。伪元素也可以使用content属性来指定要插入的内容。
属性 - a[herf^='https://']。用于根据HTML元素的属性来选中元素。

选择器优先级由四个部分组成：内联样式（最高优先级）、ID选择器、类选择器和标签选择器。

属性和值

TODO

布局

如何实现水平居中和垂直居中？

水平居中
1. 行内
  1. text-align：text-align: center;
2. 块级
  1. flex：display: flex; justify-content: center;
  2. grid: display: grid; place-items: center;
  3. margin: margin-left: auto; margin-right: auto;
  4. position + transform：position: absolute; left: 50%; transform: translate(-50%, 0%);
垂直居中
1. 单行文本
  1. line-height：text-align: center;height: xxx; line-height: xxx;
2. 多行文本/块级
  1. flex：display: flex; align-items: center;
  2. grid: display: grid; place-items: center;
  3. position + transform：position: absolute; top: 50%; transform: translate(0%, -50%);
  4. 已知子元素尺寸，position + margin：position: absolute; top: 50%; margin-top: -xxpx;
水平 + 垂直居中
1. 行内元素： height: xxx; line-height: xxx;
2. flex：display: flex; justify-content: center; align-items: center;
3. grid: display: grid; place-items: center;
4. position + transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
5. 已知子元素尺寸，position + margin：position: absolute; left: 50%; margin-left: -xxpx;

怎么记忆呢？

行内/单行文本的简单方案。
绝对定位+平移。绝对定位+margin（已知子元素尺寸）。
两种彻底解决布局的方案flex/grid。

CSS多栏布局，如何实现两栏布局、三栏布局、圣杯布局、双飞翼布局等？

两栏布局：左侧固定，右侧自适应
- float + 偏移
  - 左栏浮动+固定宽度。float: left; width: 200px;
  - 右栏宽度auto+margin偏移。margin-left: 200px; width: auto;
- float + BFC
  - 左栏浮动+固定宽度。float: left; width: 200px;
  - 右栏设置overflow:hidden。overflow:hidden;
- flex
  - 外层： display: flex;
  - 左栏固定宽度：width: 200px;
  - 右栏flex:1：flex:1;
- position 左侧绝对定位
  - 父级相对定位：position: relative;
  - 左栏绝对定位：position: absolute; width: 200px;
  - 右栏设置margin-left：margin-left: 200px;
- position 右侧绝对定位
  - 父级相对定位：position: relative;
  - 左栏绝对定位：width: 200px;
  - 右栏设置margin-left：position: absolute; left: 200px; bottom: 0; top: 0; right: 0;
三栏布局：左右两栏固定宽度,中间一栏宽度自适应
- float + 偏移
  - 左栏左浮动固定宽度：width: 200px; float: left;
  - 右栏右浮动固定宽度：width: 200px; float: right;
  - 中间一栏设置左右偏移并且处于html结构的最后：margin-left: 200px; margin-right: 200px;
- position 绝对定位 + 偏移
  - 绝对定位左栏：width: 200px; position: absolute;
  - 绝对定位右栏：position: absolute; width: 200px; right: 0; top: 0;
  - 中间一栏设置偏移：margin-left: 200px; margin-right: 200px;
- flex
  - 父级设置flex布局：display: flex;
  - 左右栏固定宽度：width: 200px;
  - 中间一栏设置flex:1：flex: 1;

怎么记忆？ position/float/flex三种方式。先定位好左右元素，然后用margin去移动就行（flex会自己移动，BFC也会清除浮动，算是一些利用浏览器布局的规则去实现的小技巧了）。

至于圣杯布局和双飞翼布局，我是真没懂与三栏布局的区别。这里就不写了，如果你知道的话请留言讨论。

什么是BFC，怎么触发，有啥用

BFC（Block Formatting Context）指的是块级格式化上下文，是一种 Web 页面中盒模型布局规则的解析器，它是 W3C CSS2.1 规范中的一个概念。

BFC 是 Web 页面中一个独立的渲染区域，具有一定的独立性和封闭性，主要有以下特点：

浮动元素：BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内哪怕只有浮动元素，BFC的高度也不会发生塌缩。
margin重叠：BFC内部相邻的BOX设置margin会重叠，并且优先使用值最高的margin。
内外独立：BFC是一个独立的区域，其内部的元素不会影响到外部，外部的元素也不会影响到内部。

触发条件:
- 根元素
- position: absolute/fixed
- display: inline-block、table-cell、table-caption、flex、inline-flex、grid 或 inline-grid
- float 属性值不为 none
- ovevflow !== visible
规则:
- 属于同一个 BFC 的两个相邻 Box 垂直排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时，浮动子元素也参与计算
- 文字层不会被浮动层覆盖，环绕于周围
应用:
- 阻止margin重叠
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖

什么是浮动，为什么要清除浮动，怎么清除？

浮动是一种常用的布局技术，可以使元素脱离文档流并沿着其他元素浮动。

浮动元素在父级元素高度不确定时，会导致布局错乱和不可预测的结果：

父元素高度塌陷：当子元素设置了浮动属性后，子元素从文档流中脱离，不再占据空间。如果父级元素没有设置高度或者指定了固定高度，那么它将无法正确计算其自身高度，从而导致父元素高度塌陷的问题。
兄弟元素位置错乱：当一个浮动元素出现在文档流中时，它会影响到后续元素的位置和布局。如果多个浮动元素相互交错，则可能导致元素位置错乱的问题。
内容溢出：当浮动元素超出了其父级元素的范围时，可能会导致内容溢出和页面布局错乱的问题。

清除浮动的方法

BFC：父元素设置 overflow 属性值为 hidden、auto 或 scroll
clear: 使用 clear 属性清除浮动（clear: both; 表示不允许浮动元素在两侧出现。）
伪元素：使用伪元素清除浮动

什么是层叠上下文，产生条件

层叠上下文（stacking context）是 CSS 中处理元素重叠显示的一种机制，它定义了元素在 z 轴方向上的顺序。

背景和边框
负值的z-index
block块状盒子
float浮动盒子
inline盒子
z-index为auto、0
正的z-index

产生条件

root元素（html）
普通元素设置position属性为非static值并设置z-index属性为具体数值
css3属性，改变了z方向的值
- flex z-index不为auto，弹性
- grid z-index不为auto，网格
- transform 转换
- opacity 透明度
- filter 滤镜
- will-change
- -webkit-overflow-scrolling

请解释一下CSS中position属性的取值有哪些？相对定位和绝对定位的区别

CSS中的position属性有以下四个取值：

static：默认值，无论如何都不会进行定位。
relative：相对定位，元素相对于其在文档流中的初始位置进行定位。
absolute：绝对定位，元素相对于其最近的已定位祖先元素进行定位，如果没有，则相对于文档的根元素。
fixed：固定定位，元素相对于视口进行定位，不随滚动条滚动而移动。

position: relative和position: absolute有什么区别？

position: relative使元素相对于其在文档流中的原始位置进行定位，并且不会从文档流中删除。而position: absolute使元素相对于其最近的已定位祖先元素进行定位，如果没有，则相对于文档的根元素进行定位，并且从文档流中删除。

弹性布局

网格布局

样式优化

盒模型

背景和边框

文字

图片

字体

动画

如何使用 CSS3 实现动画效果？
- transition - CSS 属性的过渡效果
  - transition-property：指定需要过渡的 CSS 属性。
  - transition-duration：指定过渡的时间长度。
  - transition-timing-function：指定过渡动画的速度曲线。
  - transition-delay：指定过渡的延迟时间。
- animation - 动画的播放和循环
- transform - 元素的位置、大小、旋转等变换
关键帧动画：animation + keyframes

@keyframes blink {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

.element {
  animation: blink 1s infinite linear;
}

转场动画：

img { 
    transition: transform 0.2s ease-in-out; 
} 

img:hover { 
    transform: scale(1.1); 
}

2024前端面试题库 - CSS专题