在網(wǎng)站頁面的開發(fā)中,css的使用可以使網(wǎng)站前端工作完成更快捷,網(wǎng)站頁面更加美觀和代碼更加簡潔,css提供了多種多樣的功能,控制HTML里面的字體大小、顏色、甚至是頁面結(jié)構(gòu)的排列分布,例如下圖中的字體的大小字號、顏色和行高、內(nèi)容的背景色和和線條的粗細(xì)、內(nèi)容之間的間距等。
Css甚至還可以調(diào)節(jié)適應(yīng)不同分辨率的瀏覽器,展現(xiàn)最好的頁面布局,其中會(huì)涉及一些關(guān)于css中的屬性的兼容性,如果不考慮css 的兼容性,會(huì)有很多很多好用的css 屬性,能更加高效便捷的完成網(wǎng)站頁面的制作。例如:position中的屬性除了position: static、position: relative、position: absolute、position: fixed, position:inherit還有position: sticky;這個(gè)屬性也很好用,只是兼容性不太好。
Sticky屬性有幾個(gè)特點(diǎn),它跟absolute不一樣,并不會(huì)使元素脫離文檔流,仍會(huì)在文檔流中保留原來的位置。當(dāng)容器中滾動(dòng)的超過元素中設(shè)置的偏移值時(shí),元素就會(huì)固定。有時(shí)候在網(wǎng)站頁面的制作中,會(huì)遇到要求做隨頁面滾動(dòng),內(nèi)容固定在指定位置的效果,如下圖:
如果不需要考慮瀏覽器的兼容性,那么使用position: sticky;然后根據(jù)設(shè)計(jì)圖中的間距再設(shè)置top的偏移值,就可以做出很流暢、簡潔的隨頁面滾動(dòng),內(nèi)容固定在頁面中指定位置的效果。但是有一種情況,當(dāng)設(shè)置了position: sticky和top偏移值的元素被滾動(dòng)到父元素的底部的時(shí)候,就不會(huì)定位了。
網(wǎng)站題目:分享前端開發(fā)中不需要考慮兼容的好用css
分享地址:http://redsoil1982.com.cn/news5/243605.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、建站公司、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)