CSS

1.标准盒模型和怪异盒模型（就是标准盒模型和IE的盒子模型）

什么是盒子模型？
CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：

内容(content)，也就是元素的 width、height
内边距(padding)
边框(border)
外边距(margin)

标准盒子模型
总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)
ps：高度就是height+上下

怪异盒子模型
总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

引用自https://blog.csdn.net/AiHuanhuan110]
在IE9以下，DOCTYPE协议缺失，那么浏览器就会自己界定触发怪异模式
ps：IE浏览器的锅

2.伪类和伪元素的区别

（1）伪类
CSS伪类是用来添加一些选择器的特殊效果。
来实现一些常规的CSS选择器无法达到的效果。
（选中多行元素并改变它们的样式以达到自己想要的效果，简易化了一些js的DOM操作）
比如:target伪类，它的作用是跳转到文档（页面）的URL地址中#所指向的目标元素。

（2）伪元素
CSS 伪元素用于设置元素指定部分的样式。
例如，它用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

区别：
伪元素本质上是创建了一个可以自定义内容和样式的虚拟容器
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多的信息
总结: 伪类只是选择器CSS样式，伪元素是一个容器里面可以自定义内容

3.CSS 选择器有哪些？

1. id选择器 例如：#app{width:200px}
2. 标签选择器 例如：div{width:200px}
3. 类选择器 例如：.app{width:200px}
4. 子选择器（以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块) 例如：#app>.child{width:200px}
5. 包含选择器(以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块,类似于子选择器)div p{color:red;}
6. 兄弟选择器(以~ 隔开兄弟关系的元素(模块名~ 模块名 修饰~ 前模块往下的所有兄弟 模块)#app~p{color:red;}
7. 全局选择器
   *{
   padding:0;
   margin: 0;
   }
8. 群选择器 以，分隔(逗号分隔开需要修饰的模块名) #app,.child{color:red}
9. 相邻选择器 （于群选择器类似）以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)
10. 属性选择器
11. 伪类选择器

4.CSS 样式的优先级是怎么样的

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上
继承性的优先规则

（1） 最近的祖先样式比其他祖先样式优先级高。
（2）"直接样式"比"祖先样式"优先级高。
选择器优先级
（1）内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
（2）计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

5.谈谈对BFC的理解（可以从BFC的触发条件，BFC的规则和应用回答，例如清除浮动和解决margin合并）

6.position 有几个属性

absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
fixed 固定定位，相对于浏览器窗口进行定位，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
static 默认值，出现在正常流中
sticky 粘性定位，该定位基于用户滚动的位置。例如侧边悬浮框
inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值

7.谈谈你对 flex 布局的理解

弹性布局：
容器的属性
（1）flex-direction属性：决定主轴的方向（即项目的排列方向）

1. row（默认值）：主轴为水平方向，起点在左端。
2. row-reverse：主轴为水平方向，起点在右端。
3. column：主轴为垂直方向，起点在上沿。
4. column-reverse：主轴为垂直方向，起点在下沿。

（2）flex-wrap属性：定义，如果一条轴线排不下，如何换行。

1. nowrap（默认）：不换行。
2. wrap：换行，第一行在上方。
3. wrap-reverse：换行，第一行在下方。

（3）flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

（4） justify-content属性：定义了项目在主轴上的对齐方式。

1. lex-start（默认值）：左对齐
2. flex-end：右对齐
3. center： 居中
4. space-between：两端对齐，项目之间的间隔都相等。
5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

（5）align-items属性：定义项目在交叉轴上如何对齐

1. flex-start：交叉轴的起点对齐。

2. flex-end：交叉轴的终点对齐。
   

3. center：交叉轴的中点对齐。
   

4. baseline: 项目的第一行文字的基线对齐。
   

5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（6）align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
PS：水平垂直居中案例

.box{
    display: flex; //使用flex布局
    align-items:center;//元素居中排布垂直居中
    justify-content:center; //水平居中
}