日常知识点总结（CSS篇）：
1、弹性盒子布局：
对于弹性盒子布局的容器，使用“display:flex”声明使用弹性盒布局。css属性声明“flex-direction”用来确定主轴的方向，从而确定基本的条目排列方式。
flex-direction： // 排列方式row 横向排列
row-reverse //横向反向排列
justify-content： //子元素水平排列的方式
center //居中
space-between //两端对齐
space-around // 子元素拉手分布
flex-start // 居左
flex-end //居右
flex-wrap： //子元素是否在一行显示
no-wrap //不换行
wrap //换行
flex-flow属性把“flex-direction”和“flex-wrap”结合起来，如：flex-flow：row wrap;
align-items： // 子元素的垂直居中的排列方式
center // 居中
flex-end //底部
flex-start //开始
align-content : //多行的时候，子元素的垂直排列方式
center //居中
flex-end //底部
flex-start //开始
2、过渡与动画：
区别：1）动画（animation）不需要事件触发，过渡（transition）需要事件触发。
2）过渡只有一组（两个：开始---结束）关键帧，动画可以设置多个。
过渡（transition）语法：
transition：property(设置过渡的属性) duration(过渡持续的时间) timing-function(过渡效果的速度变化) delay(延迟执行时间);
动画（animation）语法：
animation：name(绑定的动画名称) duration(动画持续时间) timing-function(动画的速度变化) delay(延迟执行时间) iteration-count(动画的播放次数) direction(动画的运动方向);
3、移动端响应式布局开发的几大方案：
1）根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局），自适应布局
2）媒体查询，@media="(max-width: 800px)"
缺点：如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
3）rem布局，移动端
rem是指相对于根元素（html）font-size计算值的倍数，是一个相对单位，相对根元素字体大小的倍数，宽高同样也可使用。如，html的font-size:12px；那么使用rem作为单位的，1rem=12px
em相对于当前对象内文本的字体尺寸。如当前未设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的；em会继承父级元素的字体大小。
4）vw/vh viewport可视窗口，也就是浏览器
vw viewport宽度，1vw == viewport宽度的1%
vh viewport高度，1vh == viewport高度的1%
4、PSD 保存图片快捷键：
ctrl+alt+D-----鼠标左键点击显示，选中图层
ctrl+A-----选取整个区域
ctrl+shift+C-----复制图片和尺寸
ctrl+N-----新建文件
ctrl+V---粘贴图层
ctrl+shift+alt+S-----保存图片的命令，另存为PNG格式
ctrl+K-----可以修改单位尺寸
5、简介重绘与回流，以及如何优化
重绘：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损失较少。
回流：当元素的尺寸，结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
触发回流：
1）页面初次渲染
2）浏览器窗口大小改变
3）元素尺寸，位置，内容发生改变
4）元素字体大小变化
5）添加或者删除可见的dom元素
6）激活CSS伪类（例如:hover）
回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。
优化点：
1）避免频繁操作样式，可汇总后统一一次修改
2）尽量使用class进行样式修改，而不是直接操作样式
3）减少DOM的操作，可使用字符串一次性插入
6、优雅降级和渐进增强：
优雅降级，一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用css3的特性构建了一个应用，然后逐步针对各大浏览器进行hack使其可以在低版本浏览器上正常浏览。
渐进增强，一开始就针对低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果，交互，追加功能达到更好的体验。
7、前端如何优化网站性能
1）减少http请求数量
CSS Sprites（俗称CSS精灵），就是将多张图片合并成一张图片达到减少http请求的一种方案，可以通过CSS的background属性来访问图片内容。
合并CSS和JS文件，打包工具，如：grunt／gulp／webpack等。为了减少http请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用lazyLoad，俗称懒加载。控制网页上的内容在一开始无需架加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
2）控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下一次解析，解析到link或者script标签就会加载href或者src对应连接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受JS加载影响。一般情况都是CSS在头部，JS在底部。
3）利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
4）减少重排
重排时DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其他节点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
减少Reflow，如果需要在DOM操作时添加样式，尽量使用增加class属性，而不是通过style操作样式。
5）减少DOM操作
6）图标使用Icon Font替换，iconfont 技术的主要是将图标转化为字体来减少应用体积。如需在项目中使用iconfont技术，图标矢量图一开始都应合并转化为字体库。优点：减小体积，字体文件比图片要小；方便更改颜色大小，图片复用。 缺点：需要维护字体库；只适用于纯色的icon
8、常见兼容性问题：
1）不同的浏览器的标签默认的内外边距不同。解决方案：*（通配符）{padding：0；margin：0}
2）IE9以下的浏览器不能使用opacity。解决方案：filter：alpha（opacity = 50）
3）cursor: hand 显示手型在safari上不支持。解决方案：cursor：pointer
4）两个块级元素，父元素设置了overflow:auto;子元素设置了position:relative;并且高度大于父元素，在IE6/7会被隐藏而不是溢出。解决方案：父级元素设置position：relative;
9、BFC：块级格式化上下文
触发条件：display：inline-block/table
float：left/right
overflow：hidden
positiion：absoluted/fixed
IE下：zoom:1
应用场景：
1）解决浮动元素父元素高度坍塌
2）组织margin重叠
3）避免元素被浮动元素覆盖
4）自适应两列布局
10、选择器优先级：!import > 行内 > id > class > tag > 继承
11、link 和 @import区别：
link可以用来引入其他文件，rss等，@import只能引入css
link可以用js动态加载，@import不行
link引入的css可以和页面同时加载，@import需要等页面加载完再加载css
12、css预处理器（sass/less）
css预处理器的原理：是将类css语言通过webpack编译转成浏览器器可读的真正css。在这层编译之上，便可以赋予css更多更强大的功能。
1）变量使用
2）嵌套
3）标识符&
4）群组嵌套
5）混合器
6）继承
混合器会导致属性重复，css体积大，继承只继承css规则，不继承重复属性
13、关于CSS3中盒模型：
标准盒子模型：
box-sizing: content-box(标准盒模型)
内容宽度 = width
盒子宽高 = 内容宽高 + padding + border
IE盒模型：
box-sizing: border-box(IE盒模型)
内容宽度 = width - border -margin - padding
Flex盒模型：diaplay:flex; justify-content:center; align-items:center
多列布局(pad)：属性，column-count，column-gap，column-rule
14、语义化的理解：
1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
2）在没有CSS样式的情况下也能以一种文档显示，并且是容易阅读的；
3）利于SEO,语义化和搜索引擎建立良好的关系，有利于爬虫抓取更多有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
4）便于团队开发和维护，语义化更具可读性，便于阅读，维护和理解
15、清除浮动的方式
1）父级元素设置height
2）结尾处加空div标签clear:both
3）父级元素设置overflow：hidden/auto
4）使用伪类：after必须设置content:' '
16、让一个盒子在父元素里水平垂直居中：
定位三种方式（margin，padding为高宽的一半；margin: auto；transform:translate(-50%,-50%)）
display:flex;
javaScript；
display:table-cell(固定宽高)；
17、几大经典布局方案：
1）左右固定，中间自适应(浮动和负margin)。
圣杯布局，一个容器。
双飞翼布局，中间父级与左右同级。
2）使用calc(兼容到IE9),css不要写表达式，影响性能。
3）flex
4）定位
18、请说明z-index的工作原理，适用范围？
文档流
定位
19、不考虑其他因素，下面哪种渲染性能比较高？
.box a { }
a{ } //该性能较高，从右到左渲染
20、css实现单行、多行文本溢出显示省略号：
1）普通单行截断省略：
overflow: hidden; 文字长度超出限定宽度，则隐藏超出的内容
text-overflow: ellipsis; 设置文字在一行显示，不能换行
white-space: no-warp; 规定当文本溢出时，显示省略符号来代表被修剪的文字
优点：
无兼容性问题；响应式截断；文本溢出范围才显示省略号，否则不显示省略号；省略号位置显示刚好
缺点： 只支持单行文本截断
2）多行截断省略
-webkit-line-clamp: 2; 用来限制在一个块元素显示的文本的行数，2表示最多显示2行
display: -webkit-box;
-webkit-box-orient: vertica;
overflow: hidden;
text-overflow: ellipsis
缺点：兼容性一般
21、position规定元素的定位类型有：static，relative，absolute，fixed
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常的流中。
inherit：规定应该从父元素继承position属性的值。