設計 CSS 版面配置中:重要的屬性 display
block 區塊元素
div、p、form
是一個標準的區塊元素。
一個區塊元素會讓其內容從新的一行開始顯示,整行容器空間會占滿。
HTML5 新出現的元素,例如:header
、 footer
、 section
等等
高度、行高、top、bottom邊距都可以控制。
inline 內行元素
span
是一個標準的行內元素。
和其他的元素都在同一行,a、label、input、img
都是內行元素
高度、行高、top、bottom邊距都不可改變。
如何讓區塊元素變為內行元素,讓畫面變成對齊區塊。
section {
background-color:antiquewhite;
width:280px;padding:10px;margin:10px;
display:inline-block; /*區塊元素設定為內行元素*/
vertical-align:top;
text-align:center;
}
none屬性
有一些特殊的元素 display 預設值會套用 none
屬性值。
像是透過 JavaScript 動態修改元素的 display 屬性,用以隱藏display:none
或顯示display:black
該元素,而不是將元素從頁面中刪除或重建。
display
和 visibility
屬性不一樣,把 display
設定成 none
不會保留元素原本該顯示的空間,
但是 visibility: hidden;
會讓元素的內容看不見,但會保留內容應該顯示的空間,只是看不到內容。