作為一名小前端，塊級元素、行內元素用了幾千幾萬次，除了「塊級獨佔一行，行內不獨佔」之外，對細節屬性的了解十分匱乏，今天做以部分屬性的測試和闡述。
一、 對物理屬性的支援
元素類別
width
height
padding
margin
是否獨佔一行
行內元素（span,a等）××
√√×塊級元素（div,p等）√√
√√√既行內又塊級√√
√√×這是帶有上下padding的效果：
這是去除了上下padding的效果： 可見，span元素的位置及文字內容，相鄰div元素的位置都沒有發生改變，只是上下padding為其渲染了對應的上下背景色。二、行內元素如何轉化塊級
① display:block; 轉化為普通塊級
②display:inline-block; 轉化為內聯塊級，不單獨佔一行
③float: left/right；轉化為內聯塊級，不單獨佔一行，但float使得行內元素脫離了文件流，記得使用clear清除浮動
span④使用定位test-span
test-span
test-span
test-div
test-div
使用absolute或者fixed定位也可將行內元素隱式轉化為塊級元素，但也會使之脫離原先的文件流。
綜上，float和定位，都可以隱式的將行內元素轉化為塊級元素。
三、塊級轉化為行內元素
①display:inline; 轉化為行內元素
②display:inline-block; 轉化為內聯塊級，不單獨佔一行
塊級元素與行內元素特點
塊級元素 1 塊級元素會獨佔一行，其寬度自動填滿其父元素寬度 2 塊級元素可以設定 width,height屬性。注意 塊級元素即使設定了寬度，仍然是獨佔一行的 3 塊級元素可以設定margin 和 padding。行級元素 1 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，知道一行排不下，...
HTML 行內元素 塊級元素 行內塊元素的特點
html標籤按照元素種類可以分為行內元素 display inline 塊級元素 display block 和行內塊級元素 display inline block 三種。了解元素種類有利於，我們進行css布局及屬性的使用。相鄰元素可以在一行顯示直到一行排不下才進行換行。不可設定寬高 對齊等屬性，...
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...