css-display

作前端開發也有很長一段時間了，可是分對於一些基礎知識雖然平時會接觸到，但卻沒有認真總結。本篇針對CSS的display屬性作一下總結。

1、常見的display屬性值

display用來設置一個元素如何展現，常見的值包含

• block
• inline-block
• inline
• table table-cell table-row
• list-item
• flex
• grid
• none

2、元素隱藏

display:none用來隱藏元素，使用visibility:hidden也能夠隱藏元素；

區別：使用visibility:hidden 隱藏元素，但它原來佔據的空間依然存在，而使用display:none隱藏的元素再也不佔用空間

3、block、inline、inline-block及常見HTML標籤的display屬性值

block：塊級元素，默認寬度爲100%，在頁面中單獨佔一行，寬度和高度能夠設置

常見的dispaly爲block的元素：div section p h1-h6 ul dl ol form

inline：內聯元素，默認不換行，寬度和高度不可設置，由自身內容撐起；垂直方向上的padding和margin無效。

常見的display爲inline的元素：span label a img

inline-block：內聯塊級元素，與inline相似，默認不換行，多個inline-block的元素會排在同一行；但寬度和高度能夠設置，垂直方向上的padding和margin也能夠設置。

常見的display爲inline-block的元素：input select button textarea

其餘：table默認display:table，tr默認dispaly:table-row,td默認display:table-cell，li默認display:list-item