无论我们是主动还是被动，面试总是我们不得不学会的一项技能；其中的基础又是重中之重，决定了我们是否能继续面下去。
本文主讲一些常用css考点：
1）flex: 1
a. flex-grow（放大比 默认0） flex-shrink（缩小比 默认1） flex-basis（在分配多余空间之前 项目占据的主轴空间）
b. flex: 1 1 auto
c. 放大比和缩小比计算 （https://www.cnblogs.com/0314dxj/p/14705398.html）
2）felx（align-self align-content align-items）
a. align-items 属性需要施加在flex容器上 它规定的是flex容器中所有item在交叉轴中的对齐方式 设置flex容器中所有的item都按一个方向对齐时用它
b. align-self 属性施加在flex容器中的item上 允许单个项目有与其他项目不一样的对齐方式 它覆盖了外部容器规定的align-items属性 同样也只规定在交叉轴上的对齐方式 如果像设置一个item有不一样的对齐方式的时候 可以用它
c. 对比align-items和align-self直接移动item自身在交叉轴上的基线 align-content移动的是容器自身的flex line 并对多行项目起作用
3）根节点动态设置（计算原理）（https://www.cnblogs.com/sttchengfei/p/13188719.html?ivk_sa=1024320u）
a. 屏幕宽为clientWidth(px) 设计稿宽度为750px 假设 n = clientWidth/750
b. 将html的font-size：n（px）
c. 则有 n(px) = 1rem 因为1rem为根节点（html节点）字体的大小一倍
d. 假设有一个div 在设计稿测量的宽度为 ruleW（px）
e. 则需要写入的宽度width：设为w(单位暂不确定)
f. 则有w/clientWidth(px)=ruleW(px)/750px
g. 化简: w = (clientWidth/750)*ruleW ==> w = n*ruleW
h. 最后得出 w = ruleW * 1rem = ruleW(rem) 即为设计稿宽
i. 问题： 上面推导完全按照数学问题来推算 忽略了一个重要的问题 就是浏览器存在最小字体 不得小于12px 当我们设置font-size: n(px) 屏幕宽度除以750可能已经很小了 这个比例已经不太适合了 所以我们把它放大一百倍
j. rem相当于根元素的字体大小 em相当于父元素的字体大小
4）opacity: 0; visibility: hidden; display: none;区别
a. dom结构 { (display: none 会让元素完全从渲染树中消失 渲染的时候不占据任何空间 不能点击) (visibility: hidden 不会让元素从渲染树消失 渲染元素继续占据空间 只是内容不可见 不能点击) (opacity: 0 不会让元素从渲染树消失 渲染元素继续占据空间 只是内容不可见 可以点击) }
b. 继承 { (display: none和opacity: 0 是非继承属性 子孙节点消失由于元素从渲染树消失造成 通过修改子孙节点属性无法显示) (visibility: hidden 是继承属性 子孙节点消失由于继承了hidden 通过设置visibility: visible 可以让子孙节点显示) }
c. 性能 { (display: none 修改元素会导致文档回流 读屏器不会读取display内容 性能消耗较大) (visibility: hidden 修改元素只会造成本元素的重绘 性能消耗较少 读屏器读取visibility内容) (opacticy: 0 修改元素会造成重绘 性能消耗少) }
d. 点击事件 （opacity可以触发 其余两个不能触发）
5）伪类+伪元素的区别
a. 伪类选择元素基于的是当前元素处于的状态 或者说元素当前所具有的特性 而不是元素的id class 属性等静态的标志 由于状态是动态变化的 所以一个元素达到特定状态时 它可能得到一个伪类的样式 当状态改变时 它又会失去这个样式 由此可以看出 它的功能和class有些类似 但它是基于文档之外的抽象 所以叫伪类
b. 与伪类针对特殊状态的元素不同的是 伪元素是对元素中的特定内容进行操作 它所操作的层次比伪类更深了一层 也因此它的动态性比伪类要低的多 实际上 设计伪元素的目的就是去选取诸如元素内容第一个字 第一行 选取某些内容进行操作 或后面在这种普通的选择器无法完成的工作 它控制的内容实际上和元素是相同的 但是它本身只是元素的抽象 并不存在于文档中 所以叫伪元素
6）link和@import的区别
a. @import是css提供的语法规则 只有导入样式表的作用 link是html提供的标签 不仅可以加载css文件 还可以定义rss rel连接属性等
b. 加载页面时 link引入的css被同时加载 @import引入的css将在页面加载完成后加载
c. link标签可作为html元素 不存在兼容问题 而@import是css2.1才有的语法 故老版本（IE5之前）不能识别
d. 可以通过js操作dom 来插入link标签改变样式由于dom方法是基于文档的 无法使用@import方式插入样式
7）src和href的区别
a. href标识超文本引用 用在link和a等元素上 href是引用页面关联 是在当前元素和引用资源之间建立联系
b. src表示引用资源 表示替换当前元素 用在img script iframe上 src是页面内容不可缺少的一部分
