iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
1

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。

「重新認識 CSS」系列文章發文於:

display 屬性

  • block:使元素產生 principal block box
  • inline-block:使元素產生 principal inline-level block container (inline-block 的內部被格式化為 block box,元素本身被格式化為 atomic inline-level box)
  • inline:使元素產生一個或多個 inline box
  • list-item:使元素 (例如:HTML 中的 li 元素) 產生 principal block box 和 marker box。有關列表的資訊和列表格式 (list formatting) 的範例,請參閱列表的部分
  • none
    • 使元素不會出現在 formatting structure 中 (也就是在 visual media 中,該元素不產生任何 box 且對佈局沒有影響)
    • descendant 元素也不產生任何 box
    • 元素及其內容將從 formatting structure 中完全刪除
    • 如果元素設為 display: none 時,其 descendant 元素無法用其他 display 屬性值來覆蓋父元素的 display 設定
    • 請注意,display: none 不會建立不可見的 box;它根本不會建立任何 box。CSS 包括使元素能夠在 formatting structure 中產生影響 formatting 但本身不可見的 box 的機制。有關詳細資訊,請查閱 visibility 部分
  • tableinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-caption:使元素的行為類似於表格元素

資料來源:


上一篇
重新認識 CSS - Visual formatting model:Box generation (inline)
下一篇
重新認識 CSS - position
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言