一七蜘、基礎(chǔ)知識(shí)
1、塊元素的特點(diǎn)：
a.總是在新行上開始墙懂；
b.高度橡卤、行高以及外邊距和內(nèi)邊距都可控制；
c.寬度默認(rèn)是它容器的100%损搬，除非設(shè)定一個(gè)寬度碧库；
d.它可以容納內(nèi)聯(lián)元素和其他塊元素。
常見的塊元素：
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)元素的特點(diǎn)：
a.和其他元素都在同一行嵌灰；
b.行內(nèi)元素設(shè)置width無效，height無效(可以設(shè)置line-height)颅悉，margin上下無效沽瞭，padding上下無效
c.寬度(width)就是它的文字和圖片的寬度，不可改變剩瓶；
d.行內(nèi)元素只能容納文本或者其他行內(nèi)元素驹溃。
e.可以通過改變行高或者水平邊框柒瓣、內(nèi)邊距或外邊距修改行內(nèi)元素尺寸
常見的內(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 - 定義變量
3吠架、 塊級(jí)元素和行內(nèi)元素之間的轉(zhuǎn)換：
- 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í)元素。 - float
當(dāng)把行內(nèi)元素設(shè)置完float:left/right后拐辽，該行內(nèi)元素的display屬性會(huì)被賦予block值拣挪，可以設(shè)置寬高等，且擁有浮動(dòng)特性俱诸。塊級(jí)元素也呈現(xiàn)出inline-block的特性菠劝，寬度會(huì)根據(jù)內(nèi)容收縮。 - position
當(dāng)為行內(nèi)元素進(jìn)行定位時(shí)睁搭，position:absolute與position:fixed.都會(huì)使得原先的行內(nèi)元素變?yōu)閴K級(jí)元素赶诊。
4、inline-block
inline-block 的元素（如input园骆、img)既具有 block 元素可以設(shè)置寬高的特性舔痪，同時(shí)又具有 inline 元素默認(rèn)不換行的特性。當(dāng)然不僅僅是這些特性锌唾，比如 inline-block 元素也可以設(shè)置 vertical-align（因?yàn)檫@個(gè)垂直對(duì)齊屬性只對(duì)設(shè)置了inline-block的元素有效） 屬性锄码。
HTML 中的換行符、空格符晌涕、制表符等合并為空白符滋捶，字體大小不為 0 的情況下，空白符自然占據(jù)一定的寬度余黎，連續(xù)使用inline-block 會(huì)產(chǎn)生元素間的空隙重窟。
二、相關(guān)問題
1驯耻、為什么在行內(nèi)元素的實(shí)際使用中亲族，上下padding好像是生效的？
當(dāng)我們使用內(nèi)邊距時(shí)可缚，只有左右方向有效；當(dāng)我們?cè)O(shè)置四個(gè)方向的內(nèi)邊距時(shí)斋枢，對(duì)于豎直方向的內(nèi)邊距該行內(nèi)元素的顯示效果是增大了帘靡，但其實(shí)設(shè)置是無效的，對(duì)周圍元素?zé)o任何影響瓤帚，即對(duì)實(shí)際布局沒有影響描姚。
注意涩赢，img是特例，它雖然是行內(nèi)元素轩勘，但也是置換元素筒扒，所以它的性質(zhì)不同于行內(nèi)元素。對(duì)于img設(shè)置padding和margin都是有效的绊寻。
2花墩、如何取消inline-block產(chǎn)生的間隙
參考資料：
說說行內(nèi)元素和塊級(jí)元素
給行內(nèi)元素設(shè)置padding和margin是否有效
行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？inline-block是什么澄步？（面試題目）
