1.BFC
之前都不知道这是什么，今天看到一个笔试题
BFC的概念：
1.规范解释
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
2.通俗理解
- BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品
- 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响
- 浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的
创建 BFC
- 根元素或包含根元素的元素
- 浮动元素 float ＝ left | right 或 inherit（≠ none）
- 绝对定位元素 position ＝ absolute 或 fixed
- display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
- overflow ＝ hidden | auto 或 scroll (≠ visible)
BFC 的特性
- BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
- 盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
- 在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
- BFC 区域不会和 float box 发生重叠。
- BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
2.脱离文档流之 float 和 position:absolute的区别
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
脱离文档流的元素有个标志：没有实际高度。
脱离文档流的元素都是块级元素
1.浮动脱离文档流(float: left。如让文字环绕图片)
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围
2.绝对定位脱离文档流（position:absolute）
3.完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）（position:fixed）
总结
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它
3.cookies，sessionStorage和localStorage的相同点和不同点？
相同点：都存储在客户端(存储在浏览器本地的)
不同点:
-
存储大小：
cookies数据大小不能超过4k。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookies大得多，可以达到5M或更大。 -
有效时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
cookies设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 -
数据与服务器之间的交互方式：
cookies数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
4.什么是Reflow？
浏览器的重排（reflow）和重绘 (repaint)
一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
下列情况会发生重排
- 页面初始渲染
- 添加/删除可见DOM元素
- 改变元素位置
- 改变元素尺寸（宽、高、内外边距、边框等）
- 改变元素内容（文本或图片等）
- 改变窗口尺寸
说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。
reflow几乎是无法避免的。
现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。
鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。
通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。
reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于 reflow（在IE下需要换一下说法，reflow要比repaint 更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。
5.@keyframe
transform
- 旋转—transform:rotate(180deg) 整数为顺时针旋转
- 倾斜—transform:skew(60deg)
- 缩放—transform:scale(2.0)
- 位移—transform:translate(X,Y)
- 旋转点—transform-origin:50% 50%
@keyframes 翻译过来就是 关键帧
@keyframes 动画名称{
from {left:0px;}
to {left:200px;}
}
@keyframes 动画名称{
from {transform:rotate(0deg)}
to {transform:rotate(360deg)}
}
animation语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation:动画名称 5s infinite alternate;
| 值 | 说明 |
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时
（当动画完成时或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
| inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
transition
设置旋转点
transition:50% 50%;
可以参考手册增加动画效果和样式
CSS3手册
我做了几个例子，后期会补充
例子链接