HTML中元素大多數(shù)都是塊級(jí)元素或行內(nèi)元素轻专。下面就讓我們來仔細(xì)的剖析剖析它們的用法和區(qū)別忆矛。
一、定義请垛。
每個(gè)名字背后都是有自己的深意的催训。比如行內(nèi)元素：只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。只能容納文本或者其他內(nèi)聯(lián)元素宗收。示例如下：
HTML
<p>This <span>span</span> is an inline element; </p>
CSS
效果：span{background-color:red;}
塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間漫拭，因此創(chuàng)建了一個(gè)“塊”。通常瀏覽器會(huì)在塊級(jí)元素前后另起一行混稽。能容納其他塊元素或者內(nèi)聯(lián)元素采驻。示例如下：
HTML
<p>This paragraph is a block-level element.</p>
CSS
p{background-color:red;}
實(shí)現(xiàn)效果：
二.塊級(jí)元素和內(nèi)聯(lián)元素的區(qū)別：
1.塊元素，總是在新行上開始匈勋；內(nèi)聯(lián)元素礼旅，和其他元素在一行；
2.塊元素洽洁，能容納其他塊元素或者內(nèi)聯(lián)元素痘系；內(nèi)聯(lián)元素，只能容納文本或其他內(nèi)聯(lián)元素诡挂；
3.塊元素中高度碎浇，行高以及頂和底邊距都可以控制临谱；內(nèi)聯(lián)元素中高璃俗，行高及頂和底邊距不可改變。
三.各自的特點(diǎn)：
1.塊元素的特點(diǎn)：
a.總是在新行上開始悉默；
b.高度城豁、行高以及外邊距和內(nèi)邊距都可控制；
c.寬度默認(rèn)是它容器的100%抄课，除非設(shè)定一個(gè)寬度唱星；
d.他可以容納內(nèi)聯(lián)元素和其他塊元素。
2.內(nèi)聯(lián)元素的特點(diǎn)：
a.和其他元素都在同一行跟磨；
b.高间聊，行高及外邊距和內(nèi)邊距不可改變；
c.寬度就是它的文字和圖片的寬度抵拘，不可改變哎榴；
d.內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素。
四、1.常見的塊元素：
address - 地址
blockquote - 塊引用
center - 舉中對(duì)齊塊
dir - 目錄列表
div - 常用塊級(jí)容易尚蝌，也是css layout的主要標(biāo)簽
dl - 定義列表
fieldset - form控制組
form - 交互表單
h1 - 大標(biāo)題
h2 - 副標(biāo)題
h3 - 3級(jí)標(biāo)題
h4 - 4級(jí)標(biāo)題
h5 - 5級(jí)標(biāo)題
h6 - 6級(jí)標(biāo)題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內(nèi)容（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容）
noscript - 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
2.常見的內(nèi)聯(lián)元素：
a - 錨點(diǎn)
abbr - 縮寫
acronym - 首字
b - 粗體（不推薦）
bdo - bidi override
big - 大字體
br - 換行
cite - 引用
code - 計(jì)算機(jī)代碼（在引用源碼的時(shí)候需要）
dfn - 定義字段
em - 強(qiáng)調(diào)
font - 字體設(shè)定（不推薦）
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標(biāo)簽
q - 短引用
s - 中劃線（不推薦）
samp - 定義范例計(jì)算機(jī)代碼
select - 項(xiàng)目選擇
small - 小字體文本
span - 常用內(nèi)聯(lián)容器迎变，定義文本內(nèi)區(qū)塊
strike - 中劃線
strong - 粗體強(qiáng)調(diào)
sub - 下標(biāo)
sup - 上標(biāo)
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
var - 定義變量
五、塊級(jí)元素和內(nèi)聯(lián)元素之間的轉(zhuǎn)換：
1.display
塊元素默認(rèn)display:block;行內(nèi)非替換元素(a,span)默認(rèn)為display：inline;行內(nèi)替換元素(input)默認(rèn)為display:inline-block;
a.display:none;不顯示該元素飘言，也不會(huì)保留該元素原先占有的文檔流位置衣形。
b.display:block;轉(zhuǎn)換為塊級(jí)元素。
c.display:inline;轉(zhuǎn)換為行內(nèi)元素姿鸿。
d.display:inline-block;轉(zhuǎn)換為行內(nèi)塊級(jí)元素谆吴。
2.float
當(dāng)把行內(nèi)元素設(shè)置完float:left/right后，該行內(nèi)元素的display屬性會(huì)被賦予block值苛预，且擁有浮動(dòng)特性纪铺。行內(nèi)元素去除了之間的莫名空白。
3.position
當(dāng)為行內(nèi)元素進(jìn)行定位時(shí)碟渺，position:absolute與position:fixed.都會(huì)使得原先的行內(nèi)元素變?yōu)閴K級(jí)元素鲜锚。
參考文獻(xiàn)：1.塊級(jí)元素 - HTML（超文本標(biāo)記語言）
2.行內(nèi)元素 - HTML（超文本標(biāo)記語言）
3.CSS塊級(jí)元素、內(nèi)聯(lián)元素 - - 博客頻道 - CSDN.NET
4.說說行內(nèi)元素與塊級(jí)元素以及之間的轉(zhuǎn)換苫拍？ - 簡(jiǎn)書
