前言

身为即将踏入职场的，接受面试官洗礼的练习生，深知面试造飞机，工作打螺丝的道理。但又必须为面试打好基础，让我们成功跨越面试官，成为合格的打工仔。身为前端三件套的CSS，是我们面试必不可少会被问到的问题，下面我就来总结一些CSS的面试题吧。

1. 什么是盒子模型？

由内容(包含width,height,content、边框(border)、内边距(padding)、外边距(margin) 组成的一个元素模型叫盒子模型。我们F12查看元素的计算样式就可以看到元素的盒子模型。

图片.png

2. 标准盒模型与怪异盒模型是什么？

标准盒模型采用的是W3C标准，盒子的content内容部分由width和height决定，添加padding或border后，盒子会相应的变大。 也就是 border-size: content-box属性。

怪异盒模型也称为IE盒模型，盒子的content内容部分由 width和height减去padding和border决定，添加padding和border盒子不会变大。也就是border-size: border-box属性。

3. CSS的选择器有哪些，优先级又是什么？

CSS的选择器有如下11种：

id选择器 (#box)
class选择器 (.wrap)
同级选择器 (.one + .two)
子选择器 (.one > div)
标签选择器 (div)
群组选择器 (.wrap, .box)
后代选择器 (#box div)
伪类选择器 (:first-child, :link, :hover)
伪元素选择器 (:before, :after)
属性选择器 (input[value='name'])
层次选择器 (:nth-child(n), :disabled)

选择器的优先级又为： !important > 内联（style） > ID > 属性选择器 > 类名选择器 > 标签

4. em rem px vh vw 是什么单位？

em：em是一个相对单位，em是相对于自身的 font-size大小来计算的，如果自身没有设置font-size属性，则会向上继承。

rem: rem是一个相对单位，相对于HTML根元素font-size的大小来计算。

px: px是一个绝对单位，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的， 所以以像素为计量单位被分在了绝对长度单位中。

vh,vw：vh,vw就是根据窗口的宽度或高度来确定的，将窗口分成100等份，1vw(vh)表示一份，100vw(vh)就表示满宽。

5. 回流重绘是什么？

是什么
- 回流：浏览器重新计算页面布局的操作。
- 重绘：浏览器重新绘制页面容器的非几何属性。
什么时候触发
- 回流：首次刷新、添加删除DOM、DOM元素位置发生变化、元素尺寸发生变化、浏览器窗口变化
- 重绘：颜色变化、阴影变化等非几何属性变化。

6. CSS 隐藏页面元素的手段和其特点

display: none 触发重排和重绘，无法响应点击事件，不占据原本位置。
visibility: hidden 不触发重排，触发重绘，无法响应点击事件，占据原来位置。
opacity: 0 不触发重排，触发重绘，响应点击事件，占据原来位置。
width:0;height:0 触发重排和重绘，无法响应点击事件，不占据原来位置。
clip-path: polygon(0px, 0px) 不触发重排，触发重绘, 无法响应点击事件,占据原来位置。
position: absolute; 不触发重排(脱离了文档流)，触发重绘, 无法响应点击事件，不占据原来位置。

7. 实现单行/多行文本溢出省略号

单行：
- white-space: norwrap; （不换行）
- overflow: hidden; （超出隐藏）
- text-overlow: ellipsis; （超出省略号）
多行：
- display: -webkit-box;
- -webkit-line-clamp:2; (行数)
- -webkit-box-orient: vertical; （子元素竖排）
- overflow: hidden;

8. 水平垂直居中的方法

父子容器定宽高：margin
flex布局
position + transform
子容器定宽高：position + margin
table布局
grid网格布局

9. 什么是 BFC 容器？

BFC容器是一种块级格式化上下文，它有一个自己的渲染区域，同时有一套自己的渲染规则。

1. 同一个BFC内的两个相邻的盒子会发生margin重叠
2. BFC区域不会和float的元素重叠
3. BFC计算高度，浮动子元素也参与
4. BFC就是页面上的一个隔离的独立容器，容器里面的元素不会影响外面的元素

触发BFC容器的属性：

1. 浮动元素：float值为left、right
2. overflow值不为 visible，为 auto、scroll、hidden
3. display的值为inline-block、inltable-cell、flex、inline-flex、grid、inline-grid ...
4. position的值为absolute或fixed

10. flex布局

flex布局的概念：

采用flex布局的元素，其内部所有的子元素会成为弹性对象，容器中存在主轴和交叉轴，子元素默认沿着主轴排列， 通过 flex-direction 来修改主轴方向。

flex布局的属性：
1. 父元素身上的
  - flex-direction （修改主轴）
  - flex-wrap （超出换不换行）
  - flex-flow = flex-direction + flex-wrap
  - justify-content
  - align-items: stretch（沾满宽度） flex-start flex-end center baseline;
  - align-content：多根主轴的对其方式
2. 子元素身上的:
  - order: 0
  - flex = flex-grow（放大比例） + flex-shrink（缩小比例） + flex-basis（固定）
  - align-self

11. grid 布局

grid布局的概念：

一种二维布局方式, 能同时处理行与列，擅长将一个页面划分成几个主要区域，以及定义这些区域的大小位置，层次。

grid布局的属性属性

1. 容器属性

    - grid-template-columns

    - grid-template-rows

    - grid-gap = grid-row-gap + grid-column-gap

    - grid-template-areas

    - grid-auto-flow : 排列方式

    - justify-items: center; 

    - align-items: center;

    - justify-content: center;

    - align-content: center;

2. 项目属性

    - grid-column-start: 2;

    - grid-column-end: 3;

    - justify-self: start;

    - align-self: start;

12. CSS3新增了哪些新特性？

选择器

- 属性选择器 - 伪类选择器 - p:first-of-type - :nth-child()

样式

- border-radius - box-shadow - border-image - background-size - background-clip - word-wrap - text-shadow

动画

- transition - transform - animation - 渐变

总结

如上，就是我觉得CSS常见的12个面试问题，如果还有其他小伙伴在面试中被问到了，欢迎在评论区补充。

关于CSS常见的面试题总结

前言