日常知识点总结（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属性的值。