做前端开发也有很长一段时间了，但是分对于一些基础知识虽然平时会接触到，但却没有认真总结。本篇针对CSS的display属性做一下总结。
一、常见的display属性值
display用来设置一个元素如何展示，常见的值包含
- block
- inline-block
- inline
- table table-cell table-row
- list-item
- flex
- grid
- none
二、元素隐藏
display:none用来隐藏元素，使用visibility:hidden也可以隐藏元素；
区别：使用visibility:hidden 隐藏元素，但它原来占据的空间依然存在，而使用display:none隐藏的元素不再占用空间
三、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