想起之前工作面試時，面試官問的乙個問題：行內元素有哪些，和塊級元素有什麼區別？這是一道蠻基礎的面試題，但是很多初學者平時只注重標籤語義，忽視了標籤行內和塊級的特性， 因此對於上述問題很有可能答不上來或者答不全。
html常見的行內元素有：
、、還有包括一些文字元素如：
、、、、、 、、、 等。
要是只回答和
html常見的塊級元素有：
、、、......、、
、、、、等。要是只回答那就說不過去了吧。
那它們之間的區別是什麼呢？
·塊級元素
1.總是從新的一行開始，即各個塊級元素獨佔一行，預設垂直向下排列；
2.高度、寬度、margin及padding都是可控的，設定有效，有邊距效果；
3.寬度沒有設定時，預設為100%；
4.塊級元素中可以包含塊級元素和行內元素。
·行內元素
1.和其他元素都在一行，即行內元素和其他行內元素都會在一條水平線上排列；
2.高度、寬度是不可控的，設定無效，由內容決定。
設定margin左右有效，有邊距效果；
設定margin上下會撐大空間但是不會產生邊距效果（即盒模型margin-top/bottom有值，但頁面上沒有邊距效果）。
設定padding左右有效，設定padding上下會撐大空間但是不會產生邊距效果（同上）。
padding效果如下展示：
塊級元素
行內元素
行內元素
塊級元素
3.根據標籤語義化的理念，行內元素最好只包含行內元素，不包含塊級元素。
轉換
當然塊級元素與行內元素之間的特性是可以相互轉換的。html可以將元素分為行內元素、塊狀元素和行內塊狀元素三種。
使用display屬性能夠將三者任意轉換：
(1)display:inline;轉換為行內元素；
(2)display:block;轉換為塊狀元素；
(3)display:inline-block;轉換為行內塊狀元素。
行內塊狀元素綜合了行內元素和塊狀元素的特性：
(1)不自動換行，與其他行內元素都會在一條水平線上排列；
(2)高度、寬度、margin及padding都是可控的，設定有效，有邊距效果；
(3)預設排列方式為從左到右。
html塊級元素與行內元素
塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要 的位置上去。而不...
html塊級元素與行內元素
塊級元素 1.獨佔一行 2.可以設定width height 3.預設width是父級元素100 4.塊級元素裡可以放塊級元素和行內元素 文字內標籤不能使用塊級元素 行內元素 1.一行可以顯示多個 2.width height設定無效 3.width預設內容的寬度 4.行內元素裡只能放文字或其他行內...
行內元素和塊級元素有哪些
一.行內元素和塊級元素有哪些？塊級元素 information on author long quotation push button table caption definition description deleted text generic language style containe...