Css 有趣特性
1、css exclusion
CSS Exclusions就是致⼒于解决⽂本围绕图⽚（当然也可以是其他的元素）⽅
式。它看上去类似于CSS Shapes，但⼜和CSS Shapes有很⼤的区别，它不
需要依赖浮动，也不管是否设置了position的值为absolute、relative或者
fixed。允许内容围绕⼀个内联元素。如下图所示：
Css exclusion的两个属性：
wrap-flow: 设置exclusion区域以及内容围绕的⽅式。
wrap-margin: 设置exclusion区域与周边围绕区域的边距。
demo:
⾸先是利⽤布局flexbox 或者float等做成如下效果，将图⽚脱离⽂档流。
这也是wrap-flow: auto的效果，也就是不会创建exclusion。
当改变属性wrap-flow: both时，内容会围绕着内联元素四周：
当改变属性wrap-flow: start时，内容围绕着exclusion区域开始边缘（图⽚左
边缘），右边的区域不能有内容围绕：
当改变属性wrap-flow: end时，不同的是内容围绕着Exclusions区域的末尾边
缘（图⽚的右边缘）:
wrap-margin属性，它做的事情就是⽤来控制css exclusion区域和围绕⽂本间
的间距，但是有两个限制：不接受负值；不接受多个值。效果图：
不过CSS exclusion 属性只有IE 11和edge⽀持，随着edge采⽤新内核之后，
应该会有越来越多的浏览器⽀持。
2、scroll相关
scrollbar-color： 该属性设置滚动条轨道和滑动块的颜⾊。
效果图：
不过⽬前该属性处于level1 只有ie和firefox63以上⽀持，其中firefox64在
macos上使⽤需要将mac⾥⾯的滚动条设置为常驻模式。
Scroll-width: 该属性设置滚动条的宽度 有三个值 auto，thin，none 只有
firefox64以上⽀持。
Scroll-snap: CSS Scroll Snap（CSS 滚动捕捉）允许你在⽤户完成滚动后多
锁定特定的元素或位置。
只需要添加两个属性
scroll-snap-type和scroll-snap-align属性来使⽤滚动捕捉。
scroll-snap-type：定义在⽗元素，规定了滚动⽅向以及捕捉时机
有如下属性值
none: 默认值。表示滚动时候忽略捕捉点，也就是我们平时使⽤的滚动。
x: 捕捉⽔平定位点。
y: 捕捉垂直定位点。
block: 捕捉和块状元素排列⼀个滚动⽅向的定位点。默认⽂档流下指的就是垂
直轴。
inline: 捕捉和内联元素排列⼀个滚动⽅向的定位点。默认⽂档流下指的就是⽔
平轴。
both: 横轴纵轴都捕捉。
mandatory属性值意味着每当⽤户停⽌滚动时，浏览器必须捕捉到捕捉点。
proximity属性没有那么严格，它意味着浏览器可能会在看起来合适的情况下突
然捕捉到某个位置。但是如果滚动容器⽐视窗⼤，那么mandatory会给⽤户带
来糟糕的体验，这点需要注意
当然⽗元素还有另外的属性scroll-padding，通常来说，内容会吸附到容器边
缘，添加这个属性之后会预留⼀定距离，如果布局中有可能妨碍内容的元素，
⽐如固定的标题等，这个属性就⾮常有⽤。
⼦元素属性：
Scroll-snap-align: 这个属性可以让你指定元素哪⼀部分应该与容器对⻬
Scroll-snap-stop: normal or always
默认情况下，滚动捕捉仅在⽤户停⽌滚动时启动，这意味着⽤户可以在停⽌之
前跳过多个捕捉点。如果滚动遇到了添加always的⼦元素，那么会强制在该元
素上停⽌，然后⽤户继续滚动。⽬前该属性处于试验阶段，还没有被任何浏览
器⽀持。
浏览器⽀持情况：
