前端基础面试题·第二篇——CSS（其一）

1.伪类与伪元素

1. 伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：
2. 伪元素，用于设置一个元素的特殊状态的一部分，写法为::

伪元素于伪类：
伪元素： ::before ::after ::first-line
伪类： :hover :active :focus :nth-child(n)

2.单位

1. px : 像素，绝对单位
2. em :相对单位，相对于父元素字体大小
3. rem:相对单位，相对于根元素html的字体大小，当这个值设置到html标签上时，相对于16px计算
4. vw:相对单位，相对于视口宽度，将视口宽度分为100份
5. vh: 相对单位, 相对于视口高度，规则与vw相同
6. rpx : 相对单位，微信小程序，uniapp框架等应用

3.block inline inline-block

1. block: 将元素设置成块级元素样式
2. inline: 将元素设置成行内元素样式
3. inline-block: 将元素设置成行内块元素，本质是行内，但元素宽高可以自定义

4.重绘，回流（重排），合成

1. 回流（重排）： 当页面中元素的物理属性发生变化，页面就会重新排列元素位置，重新渲染元素。，回流触发后一定会触发重绘
2. 重绘： 当页面元素的样式发生变化时，页面就会触发重绘，重绘不会重新计算元素位置信息，因此性能消耗比回流小很多
3. 合成， 利用transform,opacity, filter可以实现合成效果，可以减少回流次数，提高GPU渲染性能

优化方案：

• 最小化重绘与重排：使用添加新样式名
• 使用固定定位，决定定位来脱离文档流
• 使用visbility来替换display，前者会重绘，后者会重排
• 使用transform来替换position，前者会重绘，后者会重排
• 不要使⽤ table 布局，可能很⼩的⼀个⼩改动会造成整个 table 重新布局

注意： documentFragment并不是文档流的一部分，其发生改变不会导致页面重新渲染

5.盒子模型

1. 标准盒子模型：
   元素width,height,padding,border,margin,均单独设置
   box-sizing: content-box;
2. 怪异盒子模型：
   为元素设置width,height,padding,border,margin后，元素真实的宽高通过width - border - padding计算得到，设置值不等于元素真是宽高
   box-sizing: border-box;

6.BFC

bfc称为块级作用域上下文，是web页面中css渲染的一部分，是块级元素布局过程发生的区域，也是浮动元素与其他元素交互区域，bfc是一个独立的布局区域，与外部互不影响，用于决定块级元素的布局和浮动相互影响的一个区域
块级元素与行内元素都会沿着其父元素的边框排列
创建：

1. 根元素
2. 浮动元素
3. 行内块元素 表格布局 行内表格等(inline-block, table-cell ,table-caption等)
4. 决定定位 固定定位
5. 元素overflow不为visible
   特点：
6. 是页面上一个独立的容器，容器内部元素不会影响外部元素
7. 垂直方向，由上而下，与文档流一致
8. 同一个bfc下相邻的元素可能会发生margin折叠，创建新的bfc可以避免
9. bfc区域不会与浮动元素发生折叠
10. bfc区域计算高度时，浮动元素会参与计算

应用：

1. 解决额margin重叠问题
2. 自适应两栏布局
3. 清楚浮动，解决父元素高度塌陷问题

除了bfc，还有其他布局方式：

1. ifc 行格式化上下文
2. Gfc 网格布局上下文
3. FFc 自适应布局上下文

7.浮动

1. 浮动元素会脱离文档流，对于原文档中和浮动元素处于同一行内的元素会认为浮动元素不存在，因此浮动元素会影响文档的整体布局。
2. 父元素的高度文法被撑开，与浮动元素同级的非浮动元素会紧跟在浮动元素之后排列。
   清除浮动方式：
3. 为父元素设置高度
4. 为父元素定义缩放效果(zoom)
5. 为父元素添加overflow: hidden | auto;

8.定位

在css中常用的定位方式主要有五种，分别是：

9.文档流

文档流是web页面中元素排版的一种基本规则，是元素在页面中自动排布的规则，是元素默认的排版方式。
文档流总共分为三种：
1.普通流
普通流就是指格式化上下文，在普通流中，元素按照先后位置从上至下排列，在这个过程中，行内元素水平排列，直到当行被占满，则换行，块级元素则会被渲染到新的行，除非设置display: inline-block; | display: table-cell; | display: flex;等属性，使元素具有行内块元素特性。
2.浮动流
浮动流是元素脱离普通流，按照浮动方向排列，浮动流中，元素会尽量向左或向右浮动，直到其外边缘碰到包含框或另一个浮动元素的外边缘为止。浮动流中，元素布局不会影响其他元素在普通流中的布局。
3.定位流
定位流是元素使用绝对定位或相对定位，会根据top,left等属性进行偏移，并相对于其包含块进行定位。

10.CSS选择器

1. 类选择器： .className
2. 多重类选择器： .className1.className2
3. 多层类选择器： .className1 .className2
4. id选择器： #idName
5. 通配符选择器： *
6. 元素选择器： tagName
7. 元素 + 类： tagName.className
8. 并集选择器： tagName1, tagName2, tagName3
9. 后代选择器： tagName1 tagName2
10. 子代选择器： tagName1 > tagName2
11. 后兄弟选择器： tagName1 + tagName2： 只能选定第一个元素后的下一个兄弟元素
12. 前兄弟选择器： tagName1 ~ tagName2： 选定第一个元素之前的所有兄弟元素
13. 属性选择器： [attribute] 选择带有某一属性的元素
14. 属性选择器： [attribute=value] 选择某属性等于某一值的元素
15. 属性选择器： [attribute~=value] 选择某一属性包含某一值的元素
16. 属性选择器： [attribute^=value]选择某属性等于某一值，或者以某一值开头的元素
17. 属性选择器： [attribute$=value] 选择某属性等于某一值，或者以某一值结尾的元素
18. 属性选择器： [attribute*=value] 选择某属性包含某一值的元素
19. 伪类选择器： :link 选择未被访问的链接
20. 伪元素选择器： ::before 选择元素开始前的元素