在网站页□□面的开发□□□□中，css的使用可□□□以使网站□□□□前端工作◉完成更快□□□□捷，网站页面□□□更加美观◈和代码更◇加简洁，css提供了多◢种多样的□□□□功能，控制HTML里面的字▽体大小、颜色、甚至是页☆面结构的□□排列分布，例如下图丨中的字体□□□的大小字□□□□号、颜色和行□□□高、内容的背□□景色和和•线条的粗□□□□细、内容之间□□的间距等。
 

Css甚至还可◢以调节适□□□应不同分□□辨率的浏☆览器，展现最完□□□美的页面□□□□布局，其中会涉▼及一些关□□□于css中的属性□□□的兼容性，如果不考丨虑css 的兼容性，会有很多□□很多好用●的css 属性，能更加高□□□效便捷的□□□完成网站□□□□页面的制□□作。例如：position中的属性□□除了position: static、position: relative、position: absolute、position: fixed, position: inherit还有position: sticky; 这个属性□□也很好用，只是兼容□□性不太好。
Sticky属性有几□□个特点，它跟absolute不一样，并不会使□□□元素脱离▼文档流，仍会在文□□档流中保□□留原来的□□位置。当容器中□□□滚动的超□□过元素中□□□设置的偏□□□移值时，元素就会□□固定。有时候在□□网站页面□□□的制作中，会遇到要♦求做随页◈面滚动，内容固定□□□在指定位□□置的效果，如下图：



如果不需□□□□要考虑浏□□览器的兼□□容性，那么使用position: sticky; 然后根据□□□□设计图中□□□的间距再□□□□设置top的偏移值，就可以做○出很流畅、简洁的随□□页面滚动，内容固定□□在页面中□□□指定位置•的效果。但是有一□□□种情况，当设置了position: sticky和top偏移值的◥元素被滚□□□动到父元□□素的底部□□的时候，就不会定□□□位了。



另外，在页面制□□□□作中，也遇到需□□要做遮罩□□□的效果，有做过使□□□用定位，浮在内容□□□□的上面，用线性渐□□□□变或者png图片，后面发现□□了可以用-webkit-mask-image，不过需要□□考虑到兼□□□□容性，如果不考◣虑兼容，那么这是◣一个很好□□的选择。如下图：