HTML中常見的inline、inline-block、block元素
display常用屬性值
none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：內聯元素
inline-block：內聯塊級元素
block：塊元素
flex：彈性盒
display:none與visibility:hidden的區別
瀏覽器渲染的時候會涉及到重繪與回流的問題，前者隱藏后脫離文檔流，不占據頁面空間引發回流。后者隱藏后還占用空間，只引起重繪。因此優化的時候會有那么一條：建議用visibility:hidden替換display:none
另外，vue中的v-show指令，切換的就是元素的display樣式
inline特點
內聯元素會在一條直線上排列，在同一行從左至右水平排列。直到一行排不下，才會換行。
內聯元素設置寬、高、margin和padding的上下無效（豎直無效）。
內聯元素設置line-height，margin左右和padding的左右有效（水平有效）。
內聯元素的寬高隨標簽里的內容而變化。
block 特點
獨占一行，多個block元素另起一行，默認情況下，block元素寬度自動填滿其父元素寬度
block元素可以設置width,height屬性。塊元素即使設置了寬度,仍然是獨占一行。
block元素可以設置margin和padding屬性。
inline-block 特點#
讓block元素不再獨占一行，多個block元素可以同排一行，且元素具有block的屬性，可設置寬高
常見塊內元素
<header></header>
<nav></nav>
<address></address>
<footer></footer>
<form></form>
<div></div>
<p></p>
<h></h>
<hr/>
<ul></ul>
<ol></ol>
<li></li>
<dl></dl>
<tr></tr>
<td></td>
<table></table>
<pre></pre>
<blockquote></blockquote>
常見行內元素
<a></a>
<span></span>
<textarea></textarea>
<br/>
<b></b>
<del></del>
<em></em>
<i></i>
<strong></strong>
<sup></sup>
<sub></sub>
行內塊級元素
<img/>、<input/>、<select></select>