html概念+三大元素inline，block，inline-block ...
本人寫這篇文章是我在IT修真園裡學習了一段時間，反過來複習時整理的。雖然只是些基礎知識內容，希望能幫到大家。
首先我們要瞭解所謂的html它的定義是什麼？
【html：超文本標記語言，文本：txt格式的文件，標記：用標簽對給文本附加語義】
如果你已經通過上文對html有個瞭解後，我們就著手研究它的三個元素。
塊級(block-level)元素和內聯(inline)元素以及行內快元素(inline-block)
科普一些背景：html佈局：文檔流，float浮動，position定位以及display：flex彈性佈局。
基於最先出現的文檔流，一些元素也被賦予了它原先的語義。
Block:塊級元素單獨霸占一行，可設定寬高；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；
Inline：行內元素：可以多個標簽存在一行，對寬高屬性值不生效，完全靠內容撐開寬高！
Inline-block:行內塊元素：結合的行內和塊級的要點，不僅可以設定寬高，還可以多個標簽存在一行顯示；
(div，p，ul，li)容器：塊級元素
<div>預設屬性是前後各加<br>換行。
(Span,img,input,a)文本：行內元素
<span>標簽沒語義，作用：可單獨設置屬性
給出了一些主要要掌握的元素。同時我相信看眾也比較容易理解和記憶這些內容。如果還是沒在腦海中形成它們的樣子。你可以參考word文檔中，一段文字預設狀態下是不是鋪滿一行一行的從左到右，從上到下的排列。表格是不是新增一行兩列或者一行多列預設是鋪滿整張A4紙。說到這裡大家應該可以記住他們了。
概念和代表已經說了，但是我們不但要理解他們的語義，還要踏踏實實的使用它們。
先說inline吧，文字與img它要實現位置偏右，居中等位移，是跟word編輯器里的6個位置是 一模一樣的。而網頁設置中，頻繁使用的是Text-align：center。
就不一一解釋了，奉上內經，如下
Text-align:是設定在父盒子標簽里，規定盒子內的行內元素（文本或img標簽）居中顯示。
Line-height:是指文本的行框（行高）高。由（上，下間距和文本高度組成）
實現垂直的原理:容器高度=行框高度。文本高度預設為16px，當設定容器高度=line-height=200px時，上，下間距會自動平分184px。
Margin：0 auto：是設定在要居中的盒子標簽里。一般還要設定盒子寬度。
vertical-align:middle：是設定在兩個行內元素標簽里，使兩個行內元素兩者間和最後行內元素前的行內元素互相垂直對齊。
Tex-align和line-height常常搭配使用在一行文字的垂直居中。
Vertical-align:middle常常用於文本和img的垂直對齊。
vertical-align這個屬性，如果要細究，那真的要搭入好多新內容。其實我們也不要瞭解他的基線，中線，頂線這些內容，知道怎麼使用就好。
還有一點必須要說的：vertical-align是inline-block依賴型元素。如果不是inline-block元素，就會不理不睬。有些元素是預設支持它的：圖片，按鈕，單覆選框，單行/多行文本框等HTML控制項
