inline、block、inline-block整理

inline元素

inline元素又被稱爲：內聯元素或行內元素。

特色：

一、不獨佔一行顯示，相鄰的內聯元素在同一行，寬度隨內容的變化而變化。

二、沒有寬高屬性，不能夠設置width、height；沒有上下屬性，不能夠設置margin、padding的top和bottom值。

三、有左右屬性，可設置margin、padding的左右屬性值。

舉例：

HTML元素默認：<a>、<span>、<label>、<textarea>

css可經過設置元素樣式爲display: inline;修改元素爲塊級元素；

block元素

block元素又被稱爲：塊級元素。

特色：

一、獨佔一行，後面無論是啥元素，都會另起一行顯示，寬度默認爲父級元素的100%填充。

二、有寬高、上下、左右屬性，隨便設置。

舉例：

HTML元素默認：<div>、<p>、<pre>、<hr>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<form>

css可經過設置元素樣式爲display: block;修改元素爲塊級元素；

inline-block元素

inline-block元素又被稱爲：內聯-塊級元素。

特色

集合了inline和block元素的一部分特色。

一、聲明爲inline-block的元素，會被當作inline元素去顯示，也就是它總體沒必要獨佔一行了，可是它的內容遵循block元素的特徵，寬高、上下、左右屬性均可設置。

舉例：

HTML元素默認：<img>、<input>

css可經過設置元素樣式爲display: inline-block;修改元素爲內聯-塊級元素；