一、定義
- 塊級元素
總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
例如：
HTML
<p>這是塊級元素</p>
CSS
p{
background: red;
}
效果：
塊級效果圖
- 行內(nèi)元素
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;
例如：
HTML
<b>這是行內(nèi)元素</b>
CSS
b{
background: red;
}
效果：
行內(nèi)效果圖
區(qū)分方法：
塊級元素都是獨占一行，也就是說如果它后面再跟一個元素（不管是塊級還是內(nèi)聯(lián)）的話，那個元素都是另起一行的。
二、元素列表
1.塊級元素
<address>-----------------------//聯(lián)系方式信息.
<article>-----------------------//文章內(nèi)容。
<aside>-------------------------//伴隨內(nèi)容。
<audio>-------------------------//音頻播放。
<blockquote>--------------------//塊引用。
<canvas>------------------------//繪制圖形。
<dd>----------------------------//定義列表中定義條目描述。
<div>---------------------------//文檔分區(qū)。
<dl>----------------------------//定義列表。
<fieldset>----------------------//表單元素分組。
<figcaption>--------------------//圖文信息組標題
<figure>------------------------//圖文信息組 (參照 <figcaption>)。
<footer>------------------------//區(qū)段尾或頁尾。
<form>--------------------------//表單。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>//標題級別 1-6.
<header>------------------------//區(qū)段頭或頁頭。
<hgroup>------------------------//標題組。
<hr>----------------------------//水平分割線.
<noscript>----------------------//不支持腳本或禁用腳本時顯示的內(nèi)容。
<ol>----------------------------//有序列表。
<output>------------------------//表單輸出。
<p>-----------------------------//行。
<pre>---------------------------//預(yù)格式化文本。
<section>-----------------------//一個頁面區(qū)段。
<table>-------------------------//表格。
<tfoot>-------------------------//表腳注。
<ul>----------------------------//無序列表。
<video>-------------------------//視頻。
2.行內(nèi)元素
<a>----------------------------//錨點
<abbr>-------------------------//縮寫
<acronym>----------------------//首字
<b>----------------------------//粗體（不推薦）
<bdo>--------------------------//bidi override
<big>--------------------------//大字體
<br> --------------------------//換行
<cite>-------------------------//引用
<code>-------------------------//計算機代碼（在引用源碼的時候需要）
<dfn>--------------------------//定義字段
<em>---------------------------//強調(diào)
<font>-------------------------//字體設(shè)定（不推薦）
<i>----------------------------//斜體
<img>--------------------------//圖片
<input>------------------------//輸入框
<kbd>--------------------------//定義鍵盤文本
<label>------------------------//表格標簽
<q>----------------------------//短引用
<s>----------------------------//中劃線（不推薦）
<samp> ------------------------//定義范例計算機代碼
<select>-----------------------//項目選擇
<small>------------------------//小字體文本
<span>-------------------------//常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
<ke>---------------------------//中劃線
<strong> ----------------------//粗體強調(diào)
<sub>--------------------------//下標
<sup>--------------------------//上標
<textarea>---------------------//多行文本輸入框
<tt>---------------------------//電傳文本
<u>----------------------------//下劃線
<var>--------------------------//定義變量
三、塊級元素和內(nèi)聯(lián)元素之間的轉(zhuǎn)換
1、display
- display:none; 不顯示該元素，也不會保留鈣元素原先占用的文檔流位置。
- display:block;轉(zhuǎn)化為塊級元素。
- display:inline;轉(zhuǎn)化為行內(nèi)元素。
- display:inline-block;轉(zhuǎn)化為行內(nèi)塊級元素。
2、float（浮動）
- float：把行內(nèi)元素設(shè)置完float:left/right后，該行內(nèi)元素的display屬性被賦予block值，且擁有浮動特性。
3、position（定位）
- position：把行內(nèi)元素設(shè)置為position:absolute/fixed后，都會使原先的行內(nèi)元素變?yōu)閴K級元素。
注意??:設(shè)置float和positon會有其他的副作用
四、塊級元素與內(nèi)聯(lián)元素的區(qū)別
區(qū)別1
塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
行內(nèi)：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
區(qū)別2
塊級：塊級元素可以設(shè)置寬高
行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
區(qū)別3
塊級：塊級元素可以設(shè)置margin，padding
行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區(qū)別4
塊級：display:block;
行內(nèi)：display:inline;
可以通過修改display屬性來切換塊級元素和行內(nèi)元素
參考：
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
- http://blog.csdn.net/chen_zw/article/details/8713205
- 注：自由轉(zhuǎn)載-非商用-非衍生-保持署名
