《精彩絕倫的CSS》 提示(三)讓元素「消失」

2021-07-30 15:48:36 字數 810 閱讀 5202

三、讓元素消失

1、抑制元素的顯示:display:none;

.hide

應用了hide類的元素,就像不存在一樣,不會對布局有任何影響。

然而這樣子做會有兩個陷阱,乙個潛在的,乙個固有的。

潛在的就是,如果通過js將display設為none那麼想復原時該怎麼做,因為原顯示值可能是inline或者block又或者都不是,有個普遍的做法,即不指定任何值:

obj.style.display = '';

這會使預設恢復為在其css中設定的值,或者瀏覽器內建樣式值。

另乙個解決方法是,新增乙個隱藏元素的類,當需要顯示元素時將該類去掉。

固有問題就是,顯示值為none時,元素無法被絕大多數的輔助技術(比如螢幕閱讀器)「看到」。

2、抑制元素可見性:

visibility:hidden;

該規則與display的區別是參與頁面布局。但這對於絕對元素來說沒有什麼問題,因為它們已經不參與頁面布局了。(絕對定位元素位於其他元素的上方,並且在對其他元素進行布局時不被考慮在內。)

但遺憾的是這種技術仍不能被絕大多數螢幕閱讀器可見。

3、將元素移出螢幕

.hide

絕對定位移出螢幕。這樣不僅會將元素移到視野之外,但是至少仍被某些螢幕閱讀器識別。這就是這種技術會被當做隱藏元素的更佳選擇的原因。

那麼要將移出的元素移回來主要有三種方法:

(1).show

(2).show

採用這種方式,就不需重設top和left的值了,因為在靜態定位中這些屬性將完全被忽略掉。無論你是否重設它們,都不會有任何差異。

(3).show

學習《精彩絕倫的CSS》

當省略了部分簡寫屬性值的時候,缺失的部分就會使用該屬性的預設值。2.如何使用顏色控制邊框外觀?我們知道在css中邊框的使用是非常重要的,我們這裡就介紹一下css的邊框屬性 border 如何使用。邊框是圍繞在內容和內邊距之間的一條或多條線。內容的內邊距和外間距之間的間隙是留給邊框的,css可以用邊框...

《精彩絕倫的CSS》 提示(一)屬性值排序

一 屬性值排序 大多數允許使用多個關鍵字的css屬性都允許以任何順序書寫關鍵字,但是一些屬性要求以特定順序進行書寫,比如下面這幾個 1 調整字型值的順序 font 在定義字型屬性時必須同時包含字型大小 font size 和字型族 font family 並且按照既定的順序進行書寫,如果順序顛倒或者...

試讀《精彩絕倫的CSS2》

css 層疊樣式表 c ascading s tyle s heets 我認為說白了就是衣服!可以用來給html 換服裝用的!可以巢狀在 html 中!css已經發展得非常成功了,甚至像html一樣成功!儘管有時候它的確令人難以掌控。現 在無論是在瀏覽器還是應用商店,甚至聊天客戶端,css都無處不在...