Flexbox 是一种布局模型。提供了强大的空间分布和对齐能力

一个 flexbox 一次只能处理一个box中的元素布局，按一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

使用flex layout 设置 display: flex 即可。

CSS Grid Layout 是一个二维布局，可以同时处理行和列上的布局。 像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

css3添加了两个与混合模式相关的属性，这种方法的基本原理是将图片和背景颜色混合，从而变成新的颜色。

如果图片是含有透明背景的PNG图片时，可使用filter，一行CSS就可改造图片颜色的色相、饱和度、对比度等，原理类似PS中的滤镜。

Webkit 浏览器,像Chrome，Safari，Opera 支持非标准方法 ::-webkit-scrollbar 来创建自定义滚动条。

page-break-after可以实现强制分页，比如始终在<footer>元素后插入分页符, @media print 表示这段CSS只在打印时起作用。

@media print {
  footer {page-break-after: always;}
}