BFC IFC 的区别
BFC(block formatting context)是块级格式化上下文格式规范。内部显示类型是flow-root，无论其外部显示类型是什么。
BFC解决塌陷问题的方式：
<div class="container">
<div class="item">Item</div>
</div>
.container {
background-color: #cccccc;
}
.item {
float: left;
width: 100px;
height: 100px;
background-color: #ff66aa;
}
.container {
background-color: #cccccc;
overflow: hidden;
}
.item {
float: left;
width: 100px;
height: 100px;
background-color: #ff66aa;
}
IFC（Inline Formatting Contexts）直译为"内联格式化上下文"，IFC 的 line box（框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。
弹性盒子布局
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的，是提供一种更加有效的方式，来对一个容器中的子元素进行排列、对齐和分配空白空间。
2017年的grid布局可以定义由行和列组成的二维布局，将元素放在网格中。当position属性取值非static时，可以使用top right bottom left进行。例如CSS POSITION ‘sticky’，从效果上来看，页面滑动到“临界点”之前，表现为 relative；而到达“临界点”时，表现为 fixed。
代码如下
.sticky{
position:sticky;
top:20px;
}
三维变形
transform：transform3d rotate3d scale3d matrix3d等 transform origin:变形原点 transform-style：flat 或者 preserve-3d perspective perspective-origin backface-visibility 动画相关的改进：（1）计算布局，包括宽高和相对位置；（2）绘制：填充像素（某些渲染层形成合成层，拥有单独图层由GPU绘制，所谓硬件加速） （3）合成：收集所有绘制完成的图层，按照顺序合成后显示 注意：尽量不要触发reflow属性；
参考像素：理论上说，一个 CSS 像素，应当看起来是在距离观察者一臂之遥且像素密度为 96 DPI 的屏幕中的一个物理像素。 物理像素：CSS使得浏览器中1CSS像素的大小在不同设备上看上去总是差不多；两者可用DPR换算
CSS全局污染解决办法
原则：保证样式集合对应的选择器是唯一的 1）BEM 命名规范 2）vue-loader的scoped方案 3）CSS Modules
思考
或许可以基于CSS开发面向对象/状态的前端编程语言，来取代当前的模式？
