总纲：前端面试知识点大全
目录
1.css3动画
animation配合@keyframes
1.1 animation语法：
animation:name duration timing-function delay iteration-count direction
animation-name：规定需要绑定到选择器的keyframe名称
animation-duration：规定完成动画所花费的时间，以秒或毫秒计(带单位)，默认0
animation-timing-function：固定动画的速度曲线，liner | ease | ease-in | ease-out | ease-in-out
animation-delay：在动画开始前的延迟，秒或毫秒计，默认0
animation-iteration-count：动画播放的次数
animation-direction：normal|alternate，是否应该轮流反向播放动画，默认normal
1.2 @keyframes语法
@keyframes animation-name {keyframes-selector{css-styles}；}
animation-name 必须，动画的名称（animation的第一个参数）
keyframes-selector 必须。动画市场的百分比。（1）0%~100% （2）from（相当于0%）（3）to（相当于100%）
css-styles 必须，一个或多个合法的css样式属性
2.布局之：左边定宽，右边自适应
方法1、左边设置左浮动，右边宽度设置100%
方法2、利用flex，父元素设置为display:flex；右侧自适应子元素设置flex:1，即flex-grow：1，放大比例。默认为0，即如果存在剩余空间，也不放大。
方法3、利用负margin，这个对html结构有要求，需要额外的包裹标签包裹右侧自适应元素，然后放置在左侧的前面，即<div "包裹元素"><section></section></div><aside></aside>，利用margin-left:-100%，可以让下面浮动的元素，挤上来（因为浮动元素是尽可能向上浮动，只要有位置）
方法4、设置浮动 + 在 css 中使用 calc() 函数
参考链接：https://blog.csdn.net/sinat_36521655/article/details/81113350
3.圣杯布局，双飞翼布局
HTML结构：
<div class=“main”></div>
<div class="left"></div>
<div class="right"></div>主栏 左侧 右侧 这样的html结构，然后全部左浮动，主栏width设为100%，左侧想要上浮，设置齐margin-left:-100%；右侧想上去，则把margin-left：负右侧固定宽度；然后主栏设置box-sizing：border-box，设置padding为固定宽度的值（将内容挤回中间，不会被两侧遮盖）
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例https://blog.csdn.net/wangchengiii/article/details/77926868
4.实现垂直居中和水平居中
1、行级元素 父元素text-align：center 水平居中
2、块级元素 子元素margin：0 auto 水平居中
3、浮动元素 直接父元素relative，子元素absolute，然后translate(-50%,-50%) 都居中
4、父元素设置display:flex;justify-content:center;align-items:center 都居中
5、行级元素，height和line-height一样即可
6、块级元素，父元素高度固定，则设置为inline或者inline-block，然后height与line-height相同
父元素高度不固定，padding-top和padding-bottom相同即可
7、父元素display：flex；justify-content：center；flex-direction：column；
或display：flex；align-items：center
参考博客：https://blog.csdn.net/sinat_36521655/article/details/80131869
5.css预加载
放在任何位置都是可行的，之所以推荐放在head标签里是因为浏览器代码解析是从上到下的。如果把css放在底部，当网速慢时，html代码加载完成后而css没加载完的话，会导致页面没有样式而难以阅读，所以先加载css样式能让页面正常显示。
1、css加载不会阻塞DOM树的解析
2、css加载会阻塞DOM树的渲染
3、css加载会阻塞后面js语句的执行
6.bootstrap原理
Bootstrap 框架 栅格布局系统设计原理https://www.cnblogs.com/suwings/p/6079178.html
Bootstrap缺点：
1、多余的HTML结构和CSS样式，在media query下不同屏幕要对css进行重写或者增强
2、同样的图片可能需要两套 （小屏幕，大屏幕)
3、Sprite IMG 无法得到充分的利用， Background Size ， Position微小像素差等问题
4、其实根本没有人会闲的蛋疼的去不停的缩放屏幕
5、两套事件绑定（Click，Tap） 偷懒的话只用Click事件，导致点击触控方面体验极差
6、资源文件体积过大， 不利于优化, 手机加载解析速度慢
7.less预处理器
学习资料：http://www.css88.com/doc/less/features/#features-overview-feature-variables-
8.样式兼容
-moz-：火狐浏览器的私有属性
-webkit-：safari 和 chrome的私有属性
-o-：opera的私有属性
-ms-：ie的私有属性
9.link 和@import 的区别
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
10.css样式注意点
10.1 CSS 选择符：
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
10.2 可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent
10.3 不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height
10.4 优先级：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
可以参考：https://blog.csdn.net/sinat_36521655/article/details/80140221
10.5 CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
11.css样式注意点
FOUC - Flash Of Unstyled Content 文档样式闪烁，样式还没加载完成，后面加载完成后又回流
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。
12.table布局（table-layout）
table有一个样式属性叫table-layout，他的值有fixed和auto（默认）以及inherit
12.1 固定表格布局（fixed）：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
12.2 自动表格布局（auto）：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
13.层叠上下文
引自张鑫旭的博文《深入理解CSS中的层叠上下文和层叠顺序》：http://www.zhangxinxu.com/wordpress/?p=5115
