重學前端：塊級元素與內聯元素

摘要： 對於前端知識我一直沒有體系化的掌握，所瞭解的都是一些零星散散的知識點，遇到問題半天才能解決，所以打算進行系統的學習一遍，基礎的東西都是一勞永逸，這是重學前端系列的第一篇文章，關於塊級元素與內聯元素的區別。 塊級元素 塊級元素的特點 塊級元素獨佔一行 可設定元素的寬度、...

對於前端知識我一直沒有體系化的掌握，所瞭解的都是一些零星散散的知識點，遇到問題半天才能解決，所以打算進行系統的學習一遍，基礎的東西都是一勞永逸，這是重學前端系列的第一篇文章，關於塊級元素與內聯元素的區別。

塊級元素

塊級元素的特點

1. 塊級元素獨佔一行
2. 可設定元素的寬度、高度、行高、外邊距、內邊距
3. 塊級元素佔據其父元素（容器）的整個空間
4. 可以容納內聯元素和其他塊元素

常見塊級元素有：

<div>
<p>
<h1>~<h6>
<ol>
<ul>
<dl>
<table>
<address>
<blockquote>
<form>

內聯元素

內聯元素的特點

line-height

常內聯元素元素：

<a>
<span>
<br>
<i>
<em>
<strong>
<label>
<q>
<var>
<cite>
<code>

注意：內聯元素可設定水平方向的 margin 但垂直方向不可以設定， padding 水平和垂直可以設定

內聯塊級元素

內聯塊級元素是鑑於塊級元素和內聯元素之間的一種元素，它的特點是：

1. 和其他元素都在一行上；
2. 元素的高度、寬度、外邊距、內邊距都可設定；

內聯塊級元素有：

 <img> <input>

三種元素可以通過設定css互相轉換

display:inline;/*內聯*/
display:inline-block;/*內聯塊級*/
display:block;/* 塊級 */

為了加深印象請自行驗證，網上資料很多都已經過時了。

看個例子：

<span>右邊是圖片</span>
<img src="images/google.jpg" alt="google icon">

span 和 img 都是內聯元素，所以他們都擠在一行，為了美觀，可以讓圖片單獨一行，你只要給 img 標籤的 display 屬性設定為 block 就可以。

img {
margin: 0 auto;
display: block;
width: 30px;
}

圖片另一起了一行

--- EOF ---