之所以将word-break、overflow-wrap(word-wrap)和white-space这三个属性放在一起比较，是因为它们都有一个共同的作用，就是控制文本的换行。因为有三个，所以就容易混淆。这个三个属性有时候选任何一个都能实现我们的目标，但有时候只有某个特定的属性能实现我们的要求，这也就是我们今天要比较它们的原因，有相同点，也有不同点。

CSS变量，很像任何其它一种编程语言里的变量，可以让我们对一个值进行反复的引用。始自2017年4月，所有的现代浏览器都支持了这个功能，使得我们能编写出更紧凑、更清晰的CSS样式。

所谓”粘性侧边栏(Sticky Sidebar)”，是指页面上侧边栏(Sidebar)的一种滚动方式，正常情况下，侧边栏是跟整个页面是一体的，当页面滚动时，侧边栏跟着一起滚动，而很多页面侧边栏内容的高度很短，很快侧边栏就会滚出浏览器可视窗口，于是，侧边栏的位置变成了空白。这个空白实际上是一种资源浪费，而”粘性侧边栏(Sticky Sidebar)”的特点是，侧边栏的位置不会形成空白，

will-change 属性这种现象跟元素层叠顺序(类似z-index)混乱有关，但是因为要使用 will-change 属性，就必须要接受这种混乱的现实。

我想，这些浏览器开发商和规范制定者会说：“你想要更好的性能。而这些是我全部能做的了。有些事情我们做不了，但你们知道怎么做。这些之外的事情我们会尽力做好，剩下的事情你们来告诉我如何能做的更好。”

如果你开发的页面非常复杂，那么，这个CSS的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件，始终使用contain: strict;是很好的习惯，它可以保护你的页面不受它们的干扰而出现性能问题。

然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。

在浏览器中也可以使用JavaScript modules(模块功能)了。目前支持这一特性的浏览器包括： Safari 10.1. 谷歌浏览器(Canary 60) Firefox 54 – Edge 15 –

今年三月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。

一个flex父容器元素能给它的子元素建立一种新型的flex内容布局。这种布局其实是和将元素设定为display:block是很相似的，只是在flex布局里block换成了flex。float属性不好影响flex布局，flex父容器的margin不会和其子元素的margin有重叠效果。Flex父容器元素所形成的block容器特性跟普通的block容器元素所表现的特征完全一样。