重新認識CSS | Visibility: hidden
本篇將介紹CSS的visibility屬性。前言「重新認識CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過CSS,但這次想從CSSSpec中學到最原始的定義和內容,更加了解CSS的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。在這30天的內容中,會將Spec內看到的資料整理成這個系列,也希望正在學CSS的各位可以更加了解它。另外我也會同時將文章發至我的Blog,如果想直接看文內的程式碼Demo畫面,可以到我的Blog來看😃。本文同步發表於iT邦幫忙:重新認識CSS-visibility[1]「重新...
本篇將介紹 CSS 的 visibility 屬性。
前言「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。
在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 😃。
本文同步發表於 iT 邦幫忙:重新認識 CSS - visibility[1]
「重新認識 CSS」系列文章發文於:
visibility 屬性visibility 屬性是用於指定是否 render 由元素產生的 box,可用來顯示或隱藏 box,而無需更改文件的佈局。
下面是 visibility 屬性的定義表:
此元素的 initial value 為 visible適用於所有元素此元素為可繼承屬性,descendant 會繼承父元素的 visibility 屬性設定下面介紹各屬性值:
visiblevisibility 屬性的 initial value產生的 box 是可見的hidden產生的 box 是不可見的 (完全透明,不會繪製 (drawn) 在畫面上)但不可見的 box 還是會影響佈局如果元素的 descendant 設定 visibility: visible,則它們將是可見的如以下範例,.outer 元素設定 visibility: hidden,而 .outer 元素有兩個 descendant,所有 descendant 都會繼承父元素 .outer 的 visibility 屬性設定:
.inner-hidden 元素:因為沒有在此元素設定 visibility: visible,所以元素為不可見的.inner-visible 元素:也就是畫面中的紅色矩形,因為有在此元素設定 visibility: visible,所以元素就變為可見的在紅色矩形上面所空出的空間,其...