眾所周知，css中可以將元素分成塊級元素和行內(nèi)元素。
對于塊級元素可以通過margin、padding、border來設(shè)置盒子的樣式。還可以通過box-sizing來設(shè)置盒子的類型。
但對于行內(nèi)元素大部分人就知之甚少，這篇文章簡單的談一下我對行內(nèi)元素的理解。
哪些元素是內(nèi)聯(lián)元素
就行為表現(xiàn)來看，“內(nèi)聯(lián)元素”的典型特征就是可以和文字在一行顯示。因此，文字是內(nèi)
聯(lián)元素，圖片是內(nèi)聯(lián)元素，按鈕是內(nèi)聯(lián)元素，輸入框、下拉框等原生表單控件也是內(nèi)聯(lián)元素。但是，這個說法有一個前提，元素沒有脫離標(biāo)準(zhǔn)流。否則，像浮動和定位元素也可以和文字在一行顯示，但他們不是行內(nèi)元素。
內(nèi)聯(lián)盒模型
在頁面中，塊級元素負(fù)責(zé)布局，行內(nèi)元素負(fù)責(zé)內(nèi)容。一個塊級元素中很可能不止有一個行內(nèi)元素。
下面是一段普通的HTML
<p>我是普通的文字，這里有個 一<span>span</span> 標(biāo)簽。</p>
1. 內(nèi)容區(qū)域
內(nèi)容區(qū)域指一種圍繞文字看不見的盒子，其大小僅受字符本身特性控制，我們可以把文本選中的背景色區(qū)域作為內(nèi)容區(qū)域(::selection)；但是有些元素，如圖片這樣的替換元素，其內(nèi)容顯然不是文字，不存在字符盒子之類的，因此，對于這些元素，內(nèi)容區(qū)域可以看成元素自身。
2. 內(nèi)聯(lián)盒子
每一個內(nèi)聯(lián)元素都是一個內(nèi)聯(lián)盒子，內(nèi)聯(lián)盒子使元素排成一行，用來決定元素是內(nèi)聯(lián)還是塊級。
該盒子又可以細(xì)分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”兩類：
如果外部含內(nèi)聯(lián)標(biāo)簽（<span>、<a>、<em>等），則屬于“內(nèi)聯(lián)盒子”；如果是個光禿禿的文字，則屬于“匿名內(nèi)聯(lián)盒子”。
3. 行框盒子
實際中，一個塊級元素可能有很多行的內(nèi)容，類似小說網(wǎng)站。每一行就是一個“行框盒子”（實線框標(biāo)注），每個“行框盒子”又是由一個一個“內(nèi)聯(lián)盒子”組成的。石家巷line-height就是作用在行框盒子上。
4. 包含塊
此盒子由一行一行的行框盒子組成，在這個例子中<p>標(biāo)簽就是一個包含塊。
