display的神奇

首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline

我们常用的display属性值有：

inline
block
inline-block
none

把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。
何为 display

复杂的定义不做赘述，把display 看成一个转接头就好
1

display: none

设置了display：none样式后会隐藏元素，之前制作的下拉菜单就使用了该样式。

用 HTML + CSS 做个简单的小玩意
2

display: block

设置display:black样式主要是将元素转换成块级元素，使用display：none隐藏元素后经常会用 TA 来恢复显示状态。
3

display: inline

设置display:inline样式主要是将元素转换成内联元素，不能设置width、height 。
4

display: inline-block

display:inline-block看起来就很神奇，结合了display:inline和display:black 的一些部分特性。

设置了该样式后 TA 不会和块级元素一样单独占有一行，但却能设置width、height 。不自私，能和其他元素平起平坐，又能屈能伸，元素楷模啊。
5

display: flex

用来设置 Flex 布局的样式，设置了 display:flex 后子元素的float、clear、vertical-align属性将失效。

详细的内容后续见。

6

display: grid

设置了 display:grid 后用可以使用 Grid 布局，这是 Flex 布局的升级版，强在哪后面再细说，先知道有这个样式。