在网站页(yè)面的开发中(zhōng)，css的使用(yòng)可(kě)以使网站前端工(gōng)作(zuò)完成更快捷，网站页(yè)面更加美观和代码更加简洁，css提供了多(duō)种多(duō)样的功能(néng)，控制HTML里面的字體(tǐ)大小(xiǎo)、颜色、甚至是页(yè)面结构的排列分(fēn)布，例如下图中(zhōng)的字體(tǐ)的大小(xiǎo)字号、颜色和行高、内容的背景色和和線(xiàn)条的粗细、内容之间的间距等。

Css甚至还可(kě)以调节适应不同分(fēn)辨率的浏览器，展现最完美的页(yè)面布局，其中(zhōng)会涉及一些关于css中(zhōng)的属性的兼容性，如果不考虑css 的兼容性，会有(yǒu)很(hěn)多(duō)很(hěn)多(duō)好用(yòng)的css 属性，能(néng)更加高效便捷的完成网站页(yè)面的制作(zuò)。例如：position中(zhōng)的属性除了position: static、position: relative、position: absolute、position: fixed, position:inherit还有(yǒu)position: sticky;这个属性也很(hěn)好用(yòng)，只是兼容性不太好。Sticky属性有(yǒu)几个特点，它跟absolute不一样，并不会使元素脱离文(wén)档流，仍会在文(wén)档流中(zhōng)保留原来的位置。当容器中(zhōng)滚动的超过元素中(zhōng)设置的偏移值时，元素就会固定。有(yǒu)时候在网站页(yè)面的制作(zuò)中(zhōng)，会遇到要求做随页(yè)面滚动，内容固定在指定位置的效果，如下图：如果不需要考虑浏览器的兼容性，那么使用(yòng)position: sticky;然后根据设计图中(zhōng)的间距再设置top的偏移值，就可(kě)以做出很(hěn)流畅、简洁的随页(yè)面滚动，内容固定在页(yè)面中(zhōng)指定位置的效果。但是有(yǒu)一种情况，当设置了position: sticky和top偏移值的元素被滚动到父元素的底部的时候，就不会定位了。另外，在页(yè)面制作(zuò)中(zhōng)，也遇到需要做遮罩的效果，有(yǒu)做过使用(yòng)定位，浮在内容的上面，用(yòng)線(xiàn)性渐变或者png图片，后面发现了可(kě)以用(yòng)-webkit-mask-image，不过需要考虑到兼容性，如果不考虑兼容，那么这是一个很(hěn)好的选择。如下图：

分(fēn)享前端开发中(zhōng)不需要考虑兼容的好用(yòng)css_成都网站搭建   /wangzhanzhizuo/11385.html