研一自救指南 - 07. CSS面向面试学习

news2025/4/21 0:12:26

最近的前端面试多多少少都会遇到css的提问，感觉还是要把重点内容记记背背。这里基于b站和我自己面试的情况整理。

20250418更新：

1. BFC

Block Formatting Context，一个块级的盒子，可以创建多个。里面有很多个块，他们的布局、浮动元素和其他元素的相互作用受BFC规则的影响。

内部每个块从上到下一个一个放，垂直方向由margin，上下margin可能重叠，BFC不会与float box重叠。

对于浮动元素，如果不用BFC，肯可能有高度丢失的问题

形成BFC的条件：

float不为none

overflow为auto、scroll、hidden

display为

2. 容器的 flex

让块级元素可以整齐排列，而不是一行一行

display: flex

主轴方向：

flex-direction:row（默认） / row-reverse / column（垂直） / column-reverse

主轴排列方式：

justify-content: flex-start（顺着主轴）/ flex-end（逆着主轴）/ center（居中） / space-between（左右靠边，均分） / space-around（均分） / baseline

交叉轴的排列方式：

align-items:stretch（沿着交叉轴拉伸） / flex-start（垂直轴起始） / flex-end（垂直轴结束） / center

多行垂直轴排列方:

align-contents:stretch / flex-start / flex-end / center / space-between / space-around

间距：

gap: 10px

换行：

flex-wrap: nowrap（默认不换行） / wrap（换行） / wrap-reverse（从上到下换行）

3. 盒子模型

content（元素实际内容）-padding-border-margin

content: width / height

padding: padding-top / bottom / left / right

对于块级元素，默认占满一行；对于行内元素，如span，不能直接通过width和height设置，设置display: inline-block就可以控制宽高了

默认 width 和 height 是只包括 content 的，再有 margin 就大了，即盒子的默认模式为content-box，即box-sizing: border-box，否则可以设置box-sizing: border-box

border: solid（实线）、点线（dotted）、double（双实线）、dashed（虚线）

4. CSS定位

position: static（默认，设置top、right无效） / relative（通过自己定位，在文档流（就是还会在文档里留位置）） / sticky（不设置top等和static没区别，设置后，先static再fixed） / fixed（浏览器窗口左上角，脱离文档流，不影响其他元素定位） / absolute（绝对定位，脱离文档流，相对于最靠近它的非static的父容器，如果没有）

5. 样式使用方法

优先级：内联>内部>外部

内联样式：直接写在html元素的标签中 style="color=red"

内部样式：在style块里写

外部样式：在head里写<link rel="stylesheet" herf="./css/style.css">

6. 选择器：

id>class>标签名

元素选择器：h2 直接写
类选择器：class .class
id选择器：id #id
通用选择器： * 选择所有元素
子元素选择器： .father > #id/.class
后代选择器： .father p{}
相邻兄弟选择器：h3 + p{} (相当于是对h3和p相邻的情况下，对p做样式)
伪类选择器：

7. 属性

style="font: bolder 50px" 复合属性，可以写在一起

font-size: 字体大小

font-family:字体

font-weight:字体粗细

line-height: 行高

8. 浮动会导致父元素坍塌

解决方法：（1）在父元素写 overflow:hidden；（2）

旧内容：

1. 选择器

p{
}

// 对于id  id = "demo"
#demo {
}

// 对于类  class = "center"
.center {
}

// 对于  class = "center" 的<p>
p.center {
}

// 允许class = "center large"
可以分别设置样式，然后两个都使用等等

// 对于所有元素
* {
}

// 对于多个选择器
h1, h2, p {
}

2. 外部CSS