参考 区分display:block;display:inline;display:inline-block的区别
参考 display的使用
display: block;使元素以块级元素显示，占据一行。
display: inline;使元素以行内元素显示，与其他行内元素在同一行内。(默认属性)
display: inline-block;结合了块级元素和行内元素的特性，即可以设置宽高，同时又可以在同一行内显示。
display: flex;创建一个弹性盒子，使元素可以灵活布局。
display: grid;创建一个网格容器，使元素可以以网格形式布局。
display:none 隐藏元素
注意:
区分 display:none 和 visibility:hidden 区别
1. visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
2. display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
每个元素可以设置其元素的布局模式(即:元素如何在页面中呈现。)
1. display: block; 什么是块级元素, 有什么特征
- 一个block元素总是会占据一行，当有多个block元素就要新起多行对应。
- block元素可以设置width和 height;
其中width 默认会自动填满父类元素的宽度;
其中 height 默认是包含子元素的内容高度; - block元素可以设置padding和margin属性
- block元素不能实现vertical-align这个属性。
注意: 我们常用的<view>, <div>、<p>、<h1~h6>、<ul>、<ol>、<dl>、<li>、<dd>、<table>、<hr>、< blockquote >、< address >、< table >、< menu >、< pre >，HTML5新增的< header >、< section >、< aside >、< footer >等是块元素常见的例子，我们可以设置宽度和高度，同时可以控制元素的padding和margin属性。
对于所有的块级元素来说都是不需要用display:block来定义的，因为块级元素的默认属性就是block；
2. display: inline; 行内元素, 也是 display 的默认属性
- inline元素不会独占一行，多个相邻的行内元素会排列在一行内，直到排不下再新换一行。
设置width和height属性无效，宽度由元素内容决定;- paddding可以设置
margin只能够设置水平方向的边距,设置margin-top和margin-bottom无效
注意: span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）都是常见的行内元素
3. display: inline-block; 行内块元素(😓😓缝合怪😓😓)
- 既具有 block 元素可以设置宽高的特性
- 同时又具有 inline 元素默认不换行的特性
常见元素: < img > 、< input >、< td >
注意：当元素浮动（float）时会转化成行内块元素特点。
