大家好，我是IT修真院上海第3期學(xué)院劉民舉，一枚正直、純潔、善良的前端程序員。
今天給大家分享一下，修真院官網(wǎng)任務(wù)css-1，深度思考的知識點(diǎn)——常見的inline元素、block元素、inline-block元素有哪些？它們之間有什么區(qū)別？
1.背景介紹
在了解CSS布局之前，我們需要提前知道一些知識:在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。它們各有其自身的顯示特性。元素的這種屬性對布局的影響很大，因而，深刻的認(rèn)識它們對我們來說是很重要的。今天我們就認(rèn)識經(jīng)常用到的三類元素：inline、inline-block、block.
2.知識剖析
知識點(diǎn)1：常見的inline、inline-block、block元素
inline：a,span,br,i,em,strong,label,q,var,cite,code
inline-block：img,input
block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
知識點(diǎn)2：inline、inline-block、block的特性
inline特點(diǎn):
（1）inline元素不會獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
(2)inline元素設(shè)置width,height屬性無效。
(3)inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。
3.常見問題
問題一：inline和inline-block元素之間的間距問題
問題二：inline-block元素的如何垂直居中
問題三：利用瀏覽器來查看元素的類型
4.解決方案
問題1：inline和inline-block元素之間的間距問題
就目前而言，個(gè)人認(rèn)為，較好的方法還是設(shè)置父容器的font-size為0，子容器重新設(shè)置font-size較好。不過，具體的解決方案，還是根據(jù)實(shí)際情況進(jìn)行選擇，這種方案可以優(yōu)先考慮。
問題2：inline-block元素的如何垂直居中
方法1：設(shè)置上下padding值相等；
方法2：設(shè)置vertical-align:middle;
方法3：設(shè)置line-height大于font-size即可實(shí)現(xiàn)單行文本垂直居中，無需設(shè)置line-height和height值相等
問題3：利用瀏覽器來查看元素的類型
打開谷歌瀏覽器，F(xiàn)12，選中“Element”項(xiàng)，然后選中一個(gè)元素，在“Computed”的display中即可看到元素的類型，查看到底是inline元素還是block
元素，亦或是其它類型的元素。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
問題一：什么是行高？
問題二：行高line-height和高度height有什么區(qū)別和聯(lián)系？
7.參考文獻(xiàn)
參考一：block，inline和inline-block概念和區(qū)別
參考二：前端開發(fā)學(xué)習(xí)筆記（七）- Css 元素分類
參考三：深入理解CSS塊級(block)元素和內(nèi)聯(lián)(inline)元素
參考四：詳解CSS
8.更多討論
inline-block布局較float布局而言，有哪些優(yōu)勢呢？
鳴謝
感謝大家觀看
詳情請看：
視頻：https://v.qq.com/x/page/u05005q2mx9.html
ppt：https://github.com/ptteng/PPT/blob/master/PPT/CSS-01-inline%20block%20and%20inline-block2%20.html
