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

2023-03-12    分类: 网站建设

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

Css甚至还可以调节适应不同分辨率的浏览器,展现最好的页面布局,其中会涉及一些关于css中的属性的兼容性,如果不考虑css 的兼容性,会有很多很多好用的css 属性,能更加高效便捷的完成网站页面的制作。例如:position中的属性除了position: static、position: relative、position: absolute、position: fixed, position:inherit还有position: sticky;这个属性也很好用,只是兼容性不太好。
CSS展示效果
Sticky属性有几个特点,它跟absolute不一样,并不会使元素脱离文档流,仍会在文档流中保留原来的位置。当容器中滚动的超过元素中设置的偏移值时,元素就会固定。有时候在网站页面的制作中,会遇到要求做随页面滚动,内容固定在指定位置的效果,如下图:
CSS代码
如果不需要考虑浏览器的兼容性,那么使用position: sticky;然后根据设计图中的间距再设置top的偏移值,就可以做出很流畅、简洁的随页面滚动,内容固定在页面中指定位置的效果。但是有一种情况,当设置了position: sticky和top偏移值的元素被滚动到父元素的底部的时候,就不会定位了。
CSS代码2

网站题目:分享前端开发中不需要考虑兼容的好用css
分享地址:https://www.cdcxhl.com/news5/243605.html

成都网站建设公司_创新互联,为您提供网站排名品牌网站建设品牌网站设计建站公司营销型网站建设品牌网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都做网站