在網(wǎng)站頁(yè)面的開(kāi)發(fā)中，css的使用可以使網(wǎng)站前端工作完成更快捷，網(wǎng)站頁(yè)面更加美觀和代碼更加簡(jiǎn)潔，css提供了多種多樣的功能，控制HTML里面的字體大小、顏色、甚至是頁(yè)面結(jié)構(gòu)的排列分布，例如下圖中的字體的大小字號(hào)、顏色和行高、內(nèi)容的背景色和和線條的粗細(xì)、內(nèi)容之間的間距等。
 

Css甚至還可以調(diào)節(jié)適應(yīng)不同分辨率的瀏覽器，展現(xiàn)最完美的頁(yè)面布局，其中會(huì)涉及一些關(guān)于css中的屬性的兼容性，如果不考慮css 的兼容性，會(huì)有很多很多好用的css 屬性，能更加高效便捷的完成網(wǎng)站頁(yè)面的制作。例如：position中的屬性除了position: static、position: relative、position: absolute、position: fixed, position: inherit還有position: sticky; 這個(gè)屬性也很好用，只是兼容性不太好。
Sticky屬性有幾個(gè)特點(diǎn)，它跟absolute不一樣，并不會(huì)使元素脫離文檔流，仍會(huì)在文檔流中保留原來(lái)的位置。當(dāng)容器中滾動(dòng)的超過(guò)元素中設(shè)置的偏移值時(shí)，元素就會(huì)固定。有時(shí)候在網(wǎng)站頁(yè)面的制作中，會(huì)遇到要求做隨頁(yè)面滾動(dòng)，內(nèi)容固定在指定位置的效果，如下圖：



如果不需要考慮瀏覽器的兼容性，那么使用position: sticky; 然后根據(jù)設(shè)計(jì)圖中的間距再設(shè)置top的偏移值，就可以做出很流暢、簡(jiǎn)潔的隨頁(yè)面滾動(dòng)，內(nèi)容固定在頁(yè)面中指定位置的效果。但是有一種情況，當(dāng)設(shè)置了position: sticky和top偏移值的元素被滾動(dòng)到父元素的底部的時(shí)候，就不會(huì)定位了。



另外，在頁(yè)面制作中，也遇到需要做遮罩的效果，有做過(guò)使用定位，浮在內(nèi)容的上面，用線性漸變或者png圖片，后面發(fā)現(xiàn)了可以用-webkit-mask-image，不過(guò)需要考慮到兼容性，如果不考慮兼容，那么這是一個(gè)很好的選擇。如下圖：