## 浏览器渲染原理 ![渲染流程](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-42-4.jpg) 浏览器在服务器获取到html文档后，自上而下进行解析，在脚本文件不包含defer和async属性时，会按照以下方式执行文档内容 1. 解析html标签，生成DOM树 2. 解析css标签，生成CSSOM树 3. 把DOM树和CSSOM树组合成渲染树 4. 通过渲染树进行布局，计算每个节点的几何结构 5. 绘制元素的颜色、阴影 6. 将不同层次的元素合成，展示在页面上相关资料[网页渲染](https://segmentfault.com/a/1190000015664684) ## CSS动画 ### transition 在元素的css属性发生改变时，transition可以以动画的方式将元素改变前的值过渡到改变后的值 ```` transition: width 2s linear, height 2s ease, background-color 2s ease-in, transform 2s linear; ```` 相关属性 transition-property：指定需要过渡的css属性名称，多个名称用逗号隔开 transition-duration：设置过渡动画的完成时间 transition-timing-function：指定transition效果的转速曲线，默认值为ease linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 transition-delay：定义transition效果等待多长时间后开始执行，非必填监听transitions ```` el.addEventListener("transitionstart", func1, true); el.addEventListener("transitionrun", func2, true); el.addEventListener("transitionend", func3, true); ```` 相关资料[CSS 动画之——transition](https://juejin.im/entry/58e4a69244d904006d2a71ca) ### animation animation可以通过指定动画开始、结束以及中间点样式的关键帧来实现动画效果 ```` .test { animation: skyset 5s linear 2s infinite alternate; } @keyframes skyset { 0% { background: red;} 50%{ background: blue} 100% {background: yellow;} } ```` 相关属性 animation-name: 设置 @keyframes 动画的名称。 animation-duration：设置动画完成一个周期的时间，单位为s或ms，默认是0。 animation-timing-function：设置动画执行的速度曲线，默认是ease animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-delay：定义animation效果等待多长时间后开始执行，非必填 animation-iteration-count：设置动画被播放的次数。默认是 1。 animation-direction：设置动画是否在下一周期逆向地播放。默认是 "normal"。 animation-play-state：设置动画是否正在运行或暂停。默认是 "running"。监听animation ```` e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); ```` 相关资料[animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations)、[关于step](https://www.cnblogs.com/aaronjs/p/4642015.html)、[css3动画实践](https://aotu.io/notes/2016/01/04/css3-animation/index.html) ## BFC 官方解释是：块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 ### BFC特性 #### 计算BFC元素高度时，子元素的浮动元素也参与计算 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-48-21.png) 浮动元素因为脱离了文档流，会导致父元素高度坍塌，看起来会在父元素外部 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-50-56.jpg) 但是在BFC元素中浮动元素就会被父元素包裹住 #### BFC元素不会和浮动元素重叠 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-53-22.jpg) 这里蓝边框的浮动盒子和红底盒子重叠，会影响页面的排版 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-54-21.png) 在红底盒子创建了BFC后，两个盒子就不再重叠 #### BFC内的块级元素垂直方向的外边距会发生重叠 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-58-20.png) ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-58-26.png) 可以看到两个盒子都有10px的外边距，正常情况下两个盒子中间应该会有20px，但是在BFC内块级元素垂直方向的外边距会发生重叠，所以两个盒子之间的间隔只有10px，如果两个盒子本身设置的边距不一样大，两个盒子之间的距离取较大的那个边距而且你会发现在没有BFC元素包裹下，两个块级元素一样会有外边距合并的情况 ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-59-16.png) 在网上查BFC资料的时候很多地方都提到BFC的一个特性：BFC内部的块级盒子会在垂直方向，一个接一个地放置，刚看到的时候我就很纳闷，因为即使没有在BFC元素内，块级元素本来就是在垂直方向一个接一个放置的，BFC的这个特性就很奇怪，但是网上资料都没有对这个特性有什么说明，当初还钻了很长时间的牛角尖，后面才注意到BFC创建条件中的其中一条是，html本身就拥有BFC特性。所以没有在创建的BFC元素内，块级元素也会在垂直方向一个接一个放置的，块级元素垂直方向的外边距也会重叠。明明很早就看到html有BFC的特性，但是一直没当回事 ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-11-59-55.jpg) #### BFC是一个独立的容器，容器内外不会互相影响 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-12-0-43.png) 红底盒子被一个正常div包裹着，但是还是和蓝框盒子发生了边距合并 ````

```` ![](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-12-1-12-1-30.png) 在红底盒子的父元素拥有了BFC特性后，两个盒子的边距就没有合并了，因为BFC容器内外不会互相影响关于外边距合并：[CSS外边距合并（塌陷/margin越界）](https://www.jianshu.com/p/5f18f12cd162)、[关于margin](https://www.cnblogs.com/padding1015/p/9550327.html)、[外边距合并场景和规则](https://www.jianshu.com/p/d53bc47d3079) ### 常用创建BFC的方法 1. 根元素（HTML） 2. float 除了none以外的值 3. overflow 除了visible 以外的值（hidden，auto，scroll ） 4. display (table-cell，table-caption，inline-block, flex, inline-flex) 5. position值为（absolute，fixed）很多时候我们在处理浮动元素时，都会给元素添加clear: both的css属性，但是如果了解BFC后，就会知道其实很多时候没必要去加clear: both 相关资料[块格式化上下文](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)

CSS知识小记