塊級元素
塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。
通常瀏覽器會在塊級元素前后另起一個新行。
塊級元素只能出現在<body>內。
通常有哪些塊級元素
- <div>文檔分區
- <h1>~<h6>一級標題到六級標題
- <p>段落
- <hr>水平線
- <pre>預格式化文本
- <ul>無序列表
- <ol>有序列表
- <table>表格
- <form>表單
- <fieldset>表單元素分組
- <output>表單輸出
- <header>頁頭
- <footer>頁尾
- <section>分區或節
- <atrical>文章內容
- <aside>側邊欄
- <address>聯系方式信息
- <audio>音頻
- <video>視頻
- <blockquote>塊引用
- <canvas>繪制圖形
- <dd>定義列表中定義條目描述
- <dl>定義列表
- <figure>圖文信息組
- <figcaption>圖文信息組標題
行內元素
一個行內元素只占據它對應標簽的邊框所包含的空間。
包含其自身及其他行內元素。
通常有哪些行內元素
- <span>行內容器
- <a>定義錨
- <b>定義粗體
- <i>定義斜體
- <abbr>定義縮寫
- <acronym>定義取得首字母縮寫
- <cite>定義引用
- <big>定義大號文本
- <small>定義小號文本
- <br>定義折行
- <dfn>定義項目
- <em>著重閱讀
- <strong>定義加強
- <img>定義圖片
- <map>定義圖像映射
- <script>定義腳本
- <sub>定義下標文本
- <sup>定義上標文本
- <button>定義按鈕
- <input> 定義輸入框
- <label>定義界面中項目的標題
塊級元素與行內元素的區別：
- 一般行內元素只能包含數據和其他行內元素，塊級元素可以包含行內元素和自身及其他塊級元素。
- 默認情況下塊級元素占用一整行，而行內元素占據自身寬度空間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
h1 {
background: pink;
}
span {
background: yellow;
}
div {
background: grey;
}
strong {
background: green;
}
</style>
<body>
<h1>這是一個塊級元素，占據一整行</h1>
<span>這是一個行內元素,只占據自身寬度</span>
<div>
我是一個塊級元素我可以包含下面這個塊級元素
<p>我是被包含的塊級元素</p>
我倆都單獨占據一整行
</div>
<p>
<span>這是一個行內元素<strong>我被著重了</strong></span>
<p>
</body>
</html>
- 寬高只對塊級元素生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
p{
background: yellow;
height: 100px;
width: 300px;
}
span {
background: pink;
height: 100px;
width: 300px;
}
</style>
<body>
<p>嘗試設置行內元素的寬高<span>只有我沒有變高</span></p>
</body>
</html>
注意：如果給行內元素設定絕對定位（如 a{position: absolute;}，脫離正常文檔流，絕對定位會隱形的改變a的display為inline-block，此時就可以把a當成塊元素一樣設置寬高了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
a {
/*position: absolute;*/
width: 300px;
height: 300px;
background: red;
color: #fff;
}
</style>
<body>
<a href="www.baidu.com">百度</a>
<p>此時設置寬高都是無效的</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
a {
position: absolute;
width: 300px;
height: 300px;
background: red;
color: #fff;
}
</style>
<body>
<a href="www.baidu.com">百度</a>
<p>此時設置寬高都是有效的</p>
</body>
</html>
注：<a>元素設置絕對定位以后，脫離了正常文檔流，同時后面的元素不會為<a>留出位置，如果<a>足夠大，會將會面的元素覆蓋，圖中<p>元素被覆蓋，可以設置<a>的透明度為0.3看看<p>是不是占據了<a>之前的位置：
- 塊級元素可設置padding和margin，行內元素只能設置padding及左右margin，且設置padding時左右padding推開距離，上下padding會延申出去，但不會增加上下兩行間的距離。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
p {
background: pink;
padding: 20px;
margin: 5px;
}
span {
background: yellow;
padding: 10px;
margin: 100px
}
</style>
<body>
<h4>內邊距設置成功，左右外邊距設置成功，上下外內邊距不生效</h4>
<p>我們來看看效果<span>這是一個行內元素</span></p>
</body>
</html>
參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
http://www.lxweimin.com/p/3937727285db
