CSS中有一種隱藏屬性,可以將元素隱藏起來,讓它在頁面上看不到。使用這個屬性可以用于多種場景,例如:
1. 對于不需要顯示給用戶的信息,可以使用隱藏屬性隱藏掉,如一些元素、圖標(biāo)、背景顏色、字體顏色等。同時這些信息還可以通過一定的方法讓開發(fā)者和搜索引擎看到。
2. 在做一些導(dǎo)航菜單的時候,為了不影響頁面布局,可以將菜單的鏈接放到一個隱藏的區(qū)域,這樣可以實(shí)現(xiàn)隱藏菜單的效果。
3. 在開發(fā)移動端網(wǎng)頁時,為了兼容不同屏幕大小的設(shè)備,需要隱藏一些不必要的信息,如廣告、圖片等。
/* 屏幕閱讀器隱藏 */ .sr-only { position: absolute; left: -9999em; width: 1px; height: 1px; overflow: hidden; } /* 完全隱藏 */ .hide { display: none; } /* 部分隱藏 */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
以上是一些常見的隱藏屬性,不同的技術(shù)需求會使用不同的方法。需要提醒的是,在使用隱藏屬性時,應(yīng)該合理使用,不要濫用。如果使用不當(dāng),可能會對不同的用戶造成困擾或者誤導(dǎo)。
上一篇雅黑css
下一篇隱藏在css里面的圖片