CSS顯示屬性
如何在CSS中使用display屬性 對象的display屬性決定了瀏覽器如何渲染它。 這是一個非常重要的屬性，可能是你可以使用的值最多的一個。 這些值包括： block inline none contents flow flow-root table（以及所有的table-*） flex grid list-item inline-block inline-table inline-flex inline-grid inline-list-item 還有其他一些你可能不會用到的，比如ruby。 選擇其中任何一個將會顯著改變瀏覽器對元素及其子元素的行為。 在這篇文章中，我將分析一些在其他地方沒有涵蓋到的最重要的值： block inline inline-block none 我在其他文章中對其他的值進行了介紹： table 在Tables guide中 flex 在Flexbox guide中 grid 在CSS Grid guide中 inline inline是CSS中每個元素的默認顯示值。 除了一些元素（如div、p和section）是由用戶代理（瀏覽器）設置為block外，所有的HTML標籤都是默認以行內形式顯示的。 行內元素不會應用任何邊距或填充。 高度和寬度也是如此。 你可以添加它們，但網頁上的外觀不會改變 - 它們是由瀏覽器自動計算和應用的。 inline-block 與inline類似，但是inline-block會根據你指定的寬度和高度進行應用。 block 如前所述，通常元素是以行內形式顯示的，但有一些例外，包括： div p section ul 這些元素由瀏覽器設置為block。 使用display: block，元素以垂直方式一個接一個地堆疊，每個元素佔據整個頁面的100%。 如果你設置了width和height屬性的值以及margin和padding，則這些值都將被尊重。 none 使用display: none使元素消失。它仍然存在於HTML中，但在瀏覽器中不可見。