1.animation共有8个属性2.CSS动画，也称关键帧动画。通过@keyframes来定义关键帧。@keyframesrotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}rotate是给这个动画起的名字，from表示最开始的那一帧，to表示结束时的那一帧。定义好了关键帧后，下来就可以直接用它animation:rotate2s;animation-name来指定动画使用的关键帧；动画运行的时间animation-duration为2s；动画速度的属性animation-timing-function默认值是ease，即先快后慢。除了指定开头和结束位置的关键帧（如果不指定0%和100%，浏览器会自动推断），当然也可以指定任意百分比的帧是什么情况，比如开篇例子的另一种实现：div{width:100px;height:100px;border-radius:50%;background-color:red;animation:move2slinear4alternateboth;}@keyframesmove{0%{transform:translate(0,0);}33%{transform:translate(200px,0);}66%{transform:translate(0,0);}100%{transform:translate(200px,0);}}animation-iteration-count表示动画播放次数。无限播放时使用infinite。animation-direction表示播放方向，它的意思说指定动画按照指定顺序来播放@keyframes定义的关键帧3.同一元素可以应用多个动画
1.利用flex设置align-items、justify-content属性<divclass="box"><divclass="child">剧中</div></div>.box{width:400px;height:400px;display:flex;background-color:green;align-items:center;justify-content:center;}.child{width:100px;height:100px;background-color:#fff;}2.利用相对定位、绝对定位设置水平垂直居中，子绝父相，子上下左右设0，margin设置：auto.box{width:100vw;height:500px;background:skyblue;position:relative;}.child{width:200px;height:200px;background-color:deepskyblue;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}3.使用table-cell实现水平垂直居中：适合高度宽度未知的情况.box{display:table;height:300px;width:300px;background-color:#fd0c70;}.child{display:table-cell;vertical-align:middle;text-align:center;color:#fff;font-size:16px;}
1.通过顶层document节点获取：（1）document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。（2）document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。（3）document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。2、通过父节点获取：（1）parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。（2）parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...（3）parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。（4）parentObj.children：获取已知节点的直接子节点数组。注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。（5）parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。3、通过临近节点获取：（1）neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。（2）neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。4、通过子节点获取：（1）childNode.parentNode：获取已知节点的父节点。
1.关于HTML和CSS页面结构浏览器使用流式布局模型(FlowBasedLayout)。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了RenderTree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对RenderTree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。回流必将引起重绘，重绘不一定会引起回流。2.回流当RenderTree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。会导致回流的操作：页面首次渲染浏览器窗口大小发生改变元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）元素字体大小变化添加或者删除可见的DOM元素激活CSS伪类（例如：:hover）查询某些属性或调用某些方法3.重绘当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。4.如何避免回流和重绘CSS避免使用table布局。尽可能在DOM树的最末端改变class。避免设置多层内联样式。将动画效果应用到position属性为absolute或fixed的元素上。避免使用CSS表达式（例如：calc()）。JavaScript避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。也可以先为元素设置display:none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
1.什么是事件委托？事件委托也称之为事件代理（EventDelegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子：比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；在这里，取快递就是一个事件，每个同学指的是需要响应事件的DOM元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。（1）捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capturephase），捕获阶段不会响应任何事件；（2）目标阶段：在目标节点上触发，称为“目标阶段”（3）冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubblingphase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。2.事件委托的优点：可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒<ulid="list"><li>item1</li><li>item2</li><li>item3</li>......<li>itemn</li></ul>//......代表中间还有未知数个li如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。
关于BFCBFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与floatbox重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。创建BFC1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visibleBFC的作用1.利用BFC避免margin重叠下面代码两个div的margin发生重叠<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>防止margin重叠</title></head><style>*{margin:0;padding:0;}p{color:#f55;background:yellow;width:200px;line-height:100px;text-align:center;margin:30px;}</style><body><p>看看我的margin是多少</p><p>看看我的margin是多少</p></body></html>2属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>防止margin重叠</title></head><style>*{margin:0;padding:0;}p{color:#f55;background:yellow;width:200px;line-height:100px;text-align:center;margin:30px;}div{overflow:hidden;}</style><body><p>看看我的margin是多少</p><div><p>看看我的margin是多少</p></div></body></html>2.实现自适应布局因为BFC的区域不会与floatbox重叠，所以让right单独成为一个BFC（否则左div将会浮动在右div上面）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><style>*{margin:0;padding:0;}body{width:100%;position:relative;}.left{width:100px;height:150px;float:left;background:rgb(139,214,78);text-align:center;line-height:150px;font-size:20px;}.right{overflow:hidden;height:300px;background:rgb(170,54,236);text-align:center;line-height:300px;font-size:40px;}</style><body><divclass="left">LEFT</div><divclass="right">RIGHT</div></body></html>3.清除浮动当不给父节点设置高度，给子节点设置浮动时，会出现高度塌陷，所以需要清除浮动<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>未清除浮动，塌陷</title></head><style>.par{border:5pxsolidrgb(91,243,30);width:300px;}.child{border:5pxsolidrgb(233,250,84);width:100px;height:100px;float:left;}</style><body><divclass="par"><divclass="child"></div><divclass="child"></div></div></body></html>利用overflow:hidden给父节点激活BFC<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>清除浮动</title></head><style>.par{border:5pxsolidrgb(91,243,30);width:300px;overflow:hidden;}.child{border:5pxsolidrgb(233,250,84);width:100px;height:100px;float:left;}</style><body><divclass="par"><divclass="child"></div><divclass="child"></div></div></body></html>