[CSS]關於display的屬性

設計 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; 會讓元素的內容看不見,但會保留內容應該顯示的空間,只是看不到內容。