轉(zhuǎn)載地址：https://www.cnblogs.com/hy-sunny/p/5602236.html
一、塊級元素與行級元素
塊級元素
會占領(lǐng)頁面的一行，其后多個block元素自動換行、 可以設(shè)置width，height，設(shè)置了width后同樣也占領(lǐng)一行、同樣也可以設(shè)置 margin與padding屬性。
ps:常見的塊級元素:
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 標題一級
<h2>...</h2> 標題二級
<h3>...</h3> 標題三級
<h4>...</h4> 標題四級
<h5>...</h5> 標題五級
<h6>...</h6> 標題六級
<hr> 水平分割線
<p>...</p> 段落
<pre>...</pre> 預(yù)格式化
<blockquote>...</blockquote> 段落縮進 前后5個字符
<marquee>...</marquee> 滾動文本
<ul>...</ul> 無序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定義列表
<table>...</table> 表格
<form>...</form> 表單
<div>...</div>
行級元素
與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。
ps：常見的行級元素:
<span>...</span>
<a>...</a> 鏈接
<br> 換行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 圖片
<sup>...</sup> 上標
<sub>...</sub> 下標
<i>...</i> 斜體
<em>...</em> 斜體
<del>...</del> 刪除線
<u>...</u> 下劃線
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
二、display:[inline-block，block，inline]元素的區(qū)別
1、display：block
將元素顯示為塊級元素，從而可以更好地操控元素的寬高，以及內(nèi)外邊距，每一個塊級元素都是從新的一行開始。
2、display : inline
將元素顯示為行內(nèi)元素，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。多個相鄰的行內(nèi)元素排在同一行里，知道頁面一行排列不下，才會換新的一行。
3、display：inline-block
看上去值名inline-block是一個混合產(chǎn)物，實際上確是如此，將元素顯示為行內(nèi)塊狀元素，設(shè)置該屬性后，其他的行內(nèi)塊級元素會排列在同一行。比如我們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內(nèi)有不同高度內(nèi)容的元素時，通常要設(shè)置對齊方式如vertical-align: top;來使元素頂部對齊。
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:inline-block</title>
<style type="text/css"> li{ width:200px; text-align: center; list-style: none; display: inline-block; background-color: #eee;
}
</style>
</head>
<body>
<ul>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
</ul>
</body>
</html>
display:inline-block，block，inline示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css"> #inline p{ display: inline; background-color:red ; width:300px;/*這里設(shè)置無用*/
} #inline-block p{ display: inline-block; background-color:red ; width:100px; padding:10px;
} #block p{ display: block; background-color: red; width:100px; padding:20px;
} div{ margin:20px; background-color: #eee;
}
</style>
</head>
<body>
<div id="inline"> display:inline 在同一行，并且寬度就等于文字內(nèi)容的寬度且設(shè)置寬度無用<p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容 </div>
<div id="inline-block"> display:inline-block 既有行級元素的特性，也有塊級元素的特性，因此在同一行，能設(shè)置寬高，margin，padding<p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容 </div>
<div id="block"> display:block 塊級元素會自動換新行，占領(lǐng)一行,可以設(shè)置寬高，margin，padding <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容 </div>
</body>
</html>
需要注意的是：
低版本的ie瀏覽器（ie6 ie7）是不支持display:inline-block;所以理論上ie是不識別的，但是在 ie 內(nèi)核下有個部分叫做 hasLayout，只要觸發(fā)了它，這個元素就可以設(shè)置高寬從而使行級元素擁有了display:inline-block屬性的表象。
