在css中一提到变量大家都会想到css预处理LESS、SCSS、Stylus等语言中提供的变量使用，能够很方便的把我们经常需要更改的值统一归类管理，在我们需要更改色系样式的时候直接更改我们事先定义好的变量值，然后编辑成css就可以了。css预处理虽然让我们在写css变得更方便，但是毕竟还需要编译，需要去学习他们的语法。

css3为我们提供了变量的功能，并且比预处理更强大，更简单...

我们经常会遇到这样的问题，纯数字不能自动换行，连续输入的英文不能换行，或者篇文章中一行到达容器的末端以后没有在我们想要的位置进行换行，换行后会截断某个单词等问题，今天我们就说说css中关于换行的一些属性，和使用技巧

我们在做页面布局的时候经常会有上下左右居中的设计，由于大部分的页面结构都是左右式排版页面是固定宽度的，而元素是自上而下排列，高度不固定。所以在页面中css实现左右居中比较容易，垂直居中就不太好实现了。

在css3之前我们前端技术人员要实现垂直居中布局往往需要绞尽脑汁的去解决各种浏览器兼容问题，而随着时间的推移，ie浏览器已经退出历史舞台，现在的浏览器已经完全支持css3的各种布局方式，在css3中实现居中布局已经变得非常容易

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

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

以前我们要处理一张图片的取色，模糊，褐色等效果必须使用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规则应用于父元素（成为网格容器）和该元素的子元素（它们成为网格项）