Html的基本元素(Element)

標籤：center   設定   nbsp   vertica   彈性   垂直   put   bsp   oat   

本人寫這篇文章是我在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控制項

Html的基本元素(Element)