Css 有趣特性
1、css exclusion
CSS Exclusions就是致?于解決?本圍繞圖?（當(dāng)然也可以是其他的元素）?
式。它看上去類似于CSS Shapes，但?和CSS Shapes有很?的區(qū)別，它不
需要依賴浮動(dòng)，也不管是否設(shè)置了position的值為absolute、relative或者
fixed。允許內(nèi)容圍繞?個(gè)內(nèi)聯(lián)元素。如下圖所示：
Css exclusion的兩個(gè)屬性：
wrap-flow: 設(shè)置exclusion區(qū)域以及內(nèi)容圍繞的?式。
wrap-margin: 設(shè)置exclusion區(qū)域與周邊圍繞區(qū)域的邊距。
demo:
?先是利?布局flexbox 或者float等做成如下效果，將圖?脫離?檔流。
這也是wrap-flow: auto的效果，也就是不會(huì)創(chuàng)建exclusion。
當(dāng)改變屬性wrap-flow: both時(shí)，內(nèi)容會(huì)圍繞著內(nèi)聯(lián)元素四周：
當(dāng)改變屬性wrap-flow: start時(shí)，內(nèi)容圍繞著exclusion區(qū)域開始邊緣（圖?左
邊緣），右邊的區(qū)域不能有內(nèi)容圍繞：
當(dāng)改變屬性wrap-flow: end時(shí)，不同的是內(nèi)容圍繞著Exclusions區(qū)域的末尾邊
緣（圖?的右邊緣）:
wrap-margin屬性，它做的事情就是?來控制css exclusion區(qū)域和圍繞?本間
的間距，但是有兩個(gè)限制：不接受負(fù)值；不接受多個(gè)值。效果圖：
不過CSS exclusion 屬性只有IE 11和edge?持，隨著edge采?新內(nèi)核之后，
應(yīng)該會(huì)有越來越多的瀏覽器?持。
2、scroll相關(guān)
scrollbar-color： 該屬性設(shè)置滾動(dòng)條軌道和滑動(dòng)塊的顏?。
效果圖：
不過?前該屬性處于level1 只有ie和firefox63以上?持，其中firefox64在
macos上使?需要將mac??的滾動(dòng)條設(shè)置為常駐模式。
Scroll-width: 該屬性設(shè)置滾動(dòng)條的寬度 有三個(gè)值 auto，thin，none 只有
firefox64以上?持。
Scroll-snap: CSS Scroll Snap（CSS 滾動(dòng)捕捉）允許你在?戶完成滾動(dòng)后多
鎖定特定的元素或位置。
只需要添加兩個(gè)屬性
scroll-snap-type和scroll-snap-align屬性來使?滾動(dòng)捕捉。
scroll-snap-type：定義在?元素，規(guī)定了滾動(dòng)?向以及捕捉時(shí)機(jī)
有如下屬性值
none: 默認(rèn)值。表示滾動(dòng)時(shí)候忽略捕捉點(diǎn)，也就是我們平時(shí)使?的滾動(dòng)。
x: 捕捉?平定位點(diǎn)。
y: 捕捉垂直定位點(diǎn)。
block: 捕捉和塊狀元素排列?個(gè)滾動(dòng)?向的定位點(diǎn)。默認(rèn)?檔流下指的就是垂
直軸。
inline: 捕捉和內(nèi)聯(lián)元素排列?個(gè)滾動(dòng)?向的定位點(diǎn)。默認(rèn)?檔流下指的就是?
平軸。
both: 橫軸縱軸都捕捉。
mandatory屬性值意味著每當(dāng)?戶停?滾動(dòng)時(shí)，瀏覽器必須捕捉到捕捉點(diǎn)。
proximity屬性沒有那么嚴(yán)格，它意味著瀏覽器可能會(huì)在看起來合適的情況下突
然捕捉到某個(gè)位置。但是如果滾動(dòng)容器?視窗?，那么mandatory會(huì)給?戶帶
來糟糕的體驗(yàn)，這點(diǎn)需要注意
當(dāng)然?元素還有另外的屬性scroll-padding，通常來說，內(nèi)容會(huì)吸附到容器邊
緣，添加這個(gè)屬性之后會(huì)預(yù)留?定距離，如果布局中有可能妨礙內(nèi)容的元素，
?如固定的標(biāo)題等，這個(gè)屬性就?常有?。
?元素屬性：
Scroll-snap-align: 這個(gè)屬性可以讓你指定元素哪?部分應(yīng)該與容器對(duì)?
Scroll-snap-stop: normal or always
默認(rèn)情況下，滾動(dòng)捕捉僅在?戶停?滾動(dòng)時(shí)啟動(dòng)，這意味著?戶可以在停?之
前跳過多個(gè)捕捉點(diǎn)。如果滾動(dòng)遇到了添加always的?元素，那么會(huì)強(qiáng)制在該元
素上停?，然后?戶繼續(xù)滾動(dòng)。?前該屬性處于試驗(yàn)階段，還沒有被任何瀏覽
器?持。
瀏覽器?持情況：
