一：CSS基础
1：CSS选择器及其优先级
2：display的属性值及其作用
|--------------|------------------------------|
| 属性值 | 作用 |
| none | 元素不显示，并且会从文档流中移除 |
| block | 块类型，默认元素为父元素宽度，可设置宽高，换行显示 |
| inline | 行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示 |
| inline-block | 默认宽度为内容宽度，可以设置宽高，同行显示 |
| list-item | 像块类型元素一样显示，并添加样式列表标记 |
| table | 此元素会作为块级表格来显示 |
| inherit | 规定应该从父元素继承dispaly属性的值 |
3：display的block、inline和inline-block的区别
（1）block：会独占一行 🔜 多个元素另起一行 🔜 可以设置width,height,margin和padding属性
（2）inline：元素不会独占一行 🔜 设置width,height无效 🔜 水平方向可设置margin和padding 🔜 垂直方向不可以。
（3）inline-block：对象设置为inline对象 🔜 对象的内容作为block呈现
（4）行内元素和块级元素的特点
1）：行内元素
-
设置宽高无效
-
可以设置水平方向的margin和padding，垂直方向不可以
-
不会自动换行
2）：块级元素
-
可以设置宽高
-
设置margin和padding都有效
-
可以自动换行
-
多个块状，默认排列从上到下
4：隐藏元素的方法有哪些
|----------------------|------------|----------|
| 属性值 | 占据空间 | 响应绑定监听事件 |
| display:none | 不会在页面中占据位置 | 不响应 |
| visibility:hidden | 占据空间 | 不响应 |
| opacity:0 | 占据空间 | 响应 |
| position:absolute | 元素移除可视区域 | - |
| z-index:负值 | 元素被其余元素遮盖 | - |
| clip/clip-path | 占据位置 | 不响应 |
| transform:scale(0,0) | 占据位置 | 不响应 |
5：link和@import的区别
两者都是外部引用CSS的方式，区别如下：
|------------------------------|------------|
| link | @import |
| XHTML标签，除了加载CSS外，还可以定义RSS等事务 | 只能加载CSS |
| 引用CSS时，页面载入时同时加载 | 页面完全载入以后加载 |
| 无兼容问题 | 低版本浏览器不支持 |
| 支持使用JavaScript控制DOM去改变样式 | 不支持 |
6：display:none与visibility:hidden的区别
两个属性都是让元素隐藏，不可见
（1）在渲染树中
display:none 元素从渲染树中消失，不会占据空间
visibility:hidden 不会让元素从渲染树中消失，会占据响应的空间
（2）是否继承属性
display:none 非继承属性 🔜 子孙节点会随着父节点从渲染树消失 🔜 修改子节点的属性也无法显示。
visibility:hidden 继承属性 🔜 子孙节点消失继承了hidden 🔜 设置visibility:visible 可以让子孙节点显示.
（3）修改文档流 🔜 display会重排 🔜 visibility会重绘
（4）使用读屏器 🔜 display:none的内容不会被读取 🔜 visibility:hidden的内容会读取
7：伪元素和伪类的区别和作用？
**伪元素：**内容元素的前后插入额外的元素和样式，这些元素并不会在文档中生成
**伪类：**将特殊的效果添加到特定选择器上
**总结：**伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。
8： 对盒模型的理解
CSS3中盒模型分为两种：标准盒子模型、IE盒子模型
四部分组成：margin,border,padding,content
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
- 标准盒模型的width和height属性的范围只包含了content，
- IE盒模型的width和height属性的范围包含了border、padding和content。
可以通过修改元素的box-sizing属性来改变元素的盒模型
box-sizeing: content-box表示标准盒模型（默认值）box-sizeing: border-box表示IE盒模型（怪异盒模型）
9：margin和padding的使用场景
（1）需要在border外侧添加空白，且空白处不需要背景（色）时：margin
（2）需要在border内测添加空白，且空白处需要背景（色）时：padding
10：z-index属性在什么情况下会失效
（1）父元素position为relative时，子元素的z-index失效。
（2）元素没有设置position，属性为非static属性
（3）元素设置z-index的同时还设置了float浮动
二：页面布局
1：常见的CSS布局单位
px,%,em.rem,vw/vh
（1）px：页面布局的基础 🔜 终端屏幕所能显示的最小区域
（2）%：可以使得浏览器组件中的宽高 🔜 随着浏览器的变化而变化
（3）em,rem：
em：相对于父元素
rem：相对于根元素
（4）vw / vh与视图窗口有关的单位
2：px,em,rem的区别及使用场景
px：固定的像素，一旦设置了就无法适应页面大小而改变
em和rem相对于px更具灵活性 🔜 相对长度单位 🔜 长度不是固定的，更适用于响应式布局
em相对于父元素，rem相对于根元素
3：两栏布局的实现
左边一栏宽度固定，右边一栏宽度自适应
（1）浮动 🔜 左边元素宽度设置200px，向左浮动 🔜 右边元素margin-left:200px，宽度auto
（2）flex布局 🔜 左边固定宽度200px 🔜 右边设置为flex:1
4：三栏布局的实现
左右两栏宽度固定，中间自适应布局
**（1）绝对定位：**左右两栏设置为绝对定位，中间设置对应方向大小的margin的值
**（2）flex布局：**左右栏设置固定大小，中间一栏设置flex:1
**（3）利用浮动：**左右栏设置固定大小 + 设置对应方向的浮动 🔜 中间一栏设置左右两个方向的margin
5：水平垂直居中的实现
（1）绝对定位：top:50%,left:50%;transform:translate(-50%,-50%)
（2）绝对定位：四方向设置为0 🔜 margin:auto（宽高固定）
（3）flex布局：align-item:center / justify-content:center
6：对flex布局的理解及其使用场景
（1）flex-direction属性决定主轴的方向
（2）flex-wrap：一条轴线排不下，如何换行
（3）flex-flow：flex-direction和flex-wrap属性的简写形式
（4）justify-content：定义了项目在主轴上的对齐方式
（5）align-items：项目在交叉轴上的如何对齐
（6）align-content：多根轴线的对齐方式
flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。