● 行内元素: 默认水平排列, 如,, ...

2.4 简单选择器有几种, 写出基本语法形式

● 元素: body {...}

● ID: #active {...}

● 类: .red {...}

● 属性: [title]

● 群组: h1,h2,h3 {...}

● 通配: div * {...}

2.5 结构(上下文)选择器有几种, 并举例说明

● 后代: main div {...}

● 子元素: section > span {...}

● 同级相邻: div + p {...}

● 同级所有: div ~ p {...}

2.6 :nth-child(n)和:nth-of-type(n)

● :nth-child(n): 只与位置关联

● :nth-of-type(n): 与位置和类型均关联

2.7 :nth-child(n)和:nth-of-type(n)中的参数n的使用规则

● 用在字面量中, 从1开始, 如: :nth-child(3)

● 用在表达式中, 从0开始, 如: :nth-child(2n+1)

● 允许负值

2.8 弹性盒子(FlexBox)解决CSS中的布局中的什么问题,最适合用在哪里

● 解决了传统布局中的元素垂直对齐, 以及响应式布局的问题

● 主要用于跨设备的页面布局,特别适合响应式,如移动端

2.9 弹性元素flex属性的常用值,与对应的值组合有哪些,并一一说明

● initial,auto, content, 数值

● 默认值: flex: 0 1 auto

● flex: flex-grow flex-shrink flex-basis

● 各种组合,如flex: 1 1 auto; 等价于: flex: auto,...

2.10 vh/vw单位,与auto, 100%有什么区别

● vh/vw: 视口大小占比, 与设备相关

● auto: 为默认值, 通常与设备无关

● 100%: 自知识父容器大小

2.11 (选做)为什么align-content只能用在多行弹性容器中

● 单行容器中, 交叉轴上可使用align-items属性设置

更多面试题，请参考：《2019年大前端面试题汇总（收藏）》