以前我们在调试代码的时候常用alert方法输出代码，这个方法不能输出详细内容，而且会阻止后面的代码执行，非常不利于我们调试。

console用于在控制台输出内容，他的出现可以让我们在开发过程中调试代码变得方便，而且console也为我们提供了很多的方法，有些再调试过程中非常实用，可以节省很多时间。

在css3之前我们如果想要自定义浏览器默认的滚动条样式是无法实现的，一般的做法是通过html+css+js来实现自定义滚动条，或者网站找现成的插件，做法都比较麻烦，IE虽然可以自定义滚动条，但是也只是改一些颜色而已不能做到绚丽的效果。

css3实现了自定义滚动条效果，可以让我们设置滚动条宽度，颜色，圆角等效果，遗憾的是只有webkit内核的浏览器支持。

cropper.js一个用来处理图片的插件，可以使用它来实现图片的各种模式下的裁切效果，当我们在做一个上传头像或者上传图片功能的时候，需要用户裁切出用户想要的图片位置就可以利用这个插件来实现

cropper.js支持移动设备的图片剪裁。它基于HTML5 canvas，可以通过Base64编码导出剪裁后的图片。

以前我们要处理一张图片的取色，模糊，褐色等效果必须使用Photoshop处理完后保存多张图片，而css3滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过filter滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)...等

transition是css3中的新增属性，用来设置元素的动画过渡效果，以前要实现一个元素的过渡动画往往需要通过js写很多代码来实现而且还需要考虑各种兼容性，并且js做出的效果消耗浏览器性能；使用transition属性只需要几行代码就能实现各种炫酷的过渡效果，而且transition还可以通过GPU硬件加速，减少repaint操作，不占用js线程，过渡效果更佳柔和。

有时候我们在做页面的时候经常会遇到这样的需求，想让某个元素不执行js的一些交互行为，这个时候我们可以使用css3中为我们提供的pointer-events属性，他可以让我们轻松实现元素禁止js的交互行文，包括click、hover等事件。

移动端想要禁止某元素的滑动行为可以使用touch-action属性

在flex出现之前我们做页面都是使用的左右浮动，inline-block，表格等布局方式来实现页面的各种布局，在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有主流浏览器的支持，这意味着，现在就能很安全地在页面中使用弹性flex布局，Flex 布局也将成为未来布局的首选方案。

我们在做新闻网站的时候想实现和报纸一样的多列布局效果可以使用css为我们提供的columns属性，他可以让我们轻松实现多列布局效果，类似于word中对文字的分栏排版效果，同时我们还可以通过他的各种属性来设置不同的效果。

Grid是CSS3中网格布局系统，也是CSS3中最强大的布局系统。它是一个二维布局系统，这意味着它可以处理列和行，不像flex弹性布局主要是一维系统，他像表格一样可以让我们控制行或者例对齐，可以控制子元素跨行或者跨列，但是他比表格更加灵活，它的子元素可以单独定位就像CSS定位元素一样，同时还可以重叠单元格。

您可以使用网格布局，通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（它们成为网格项）