服务热线 400-660-5555

天津网站建设
首页 站内资讯

天津网站建设

站内资讯
天津网站建设 / 站内资讯 / 行业资讯 / 正文

分享前端开发中不需要考虑兼容的好用css

来源: All文章
发布时间:2023-04-07 15:05:27

  在网站页面的开发中,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,不过需要考虑到兼容性,如果不考虑兼容,那么这是一个很好的选择。如下图:

* 文章来源于网络,如有侵权,请联系客服删除处理。
在线 咨询

添加动力小姐姐微信

微信 咨询

电话咨询

400-660-5555

我们联系您

电话 咨询
微信扫码关注动力小姐姐 X
qr