行內元素，區塊層級元素，各自特點及其相互轉化，元素特點轉化

行內元素，區塊層級元素，各自特點及其相互轉化，元素特點轉化

作為一名小前端，區塊層級元素、行內元素用了幾千幾萬次，除了“塊級獨佔一行，行內不獨佔”之外，對細節屬性的瞭解十分匱乏，今天做以部分屬性的測試和闡述。

一、 對物理屬性的支援

元素類別	width	height	padding	margin	是否獨佔一行
行內元素（span,a等）	×	×	√	√	×
區塊層級元素（div,p等）	√	√	√	√	√
既行內又塊級	√	√	√	√	×

備忘：行內元素的上下padding（padding-top,padding-bottom）無效，可參考下例。

這是帶有上下padding的效果：

{    background-color: #eee;    padding-left: 20px;    padding-top: 20px;    padding-right: 20px;    padding-bottom: 20px;    border: 1px solid #666;}

 這是去除了上下padding的效果：

{
background-color: #eee;padding-left: 20px;padding-right: 20px;border: 1px solid #666;
}

可見，span元素的位置及常值內容，相鄰div元素的位置都沒有發生改變，只是上下padding為其渲染了對應的上下背景色。

二、行內元素如何轉化塊級

① display:block; 轉化為普通塊級

②display:inline-block; 轉化為內聯塊級，不單獨佔一行

③float: left/right；轉化為內聯塊級，不單獨佔一行，但float使得行內元素脫離了文檔流，記得使用clear清除浮動

    span    {        float:left;        width: 100px;        height: 100px;        background-color: #eee;        padding-left:20px;        padding-right:20px;        border: 1px solid #666;    }<!--對應的html代碼--><span>test-span</span>        <span>test-span</span>        <span>test-span</span>        <div style="clear: both;"></div>        <div style="width: 100px;height: 100px;background-color: lightblue;">test-div</div>        <div style="width: 100px;height: 100px;background-color: yellow;">test-div</div>

④使用定位

使用absolute或者fixed定位也可將行內元素隱式轉化為區塊層級元素，但也會使之脫離原先的文檔流。

綜上，float和定位，都可以隱式的將行內元素轉化為區塊層級元素。

三、塊級轉化為行內元素

①display:inline; 轉化為行內元素

②display:inline-block; 轉化為內聯塊級，不單獨佔一行