前言
相信大家對(duì)行內(nèi)元素的認(rèn)識(shí)大多是不換行镣隶，不能設(shè)置寬高，又或者是來自經(jīng)典的垂直水平居中內(nèi)聯(lián)元素的面試題，把line-height設(shè)置成父盒子的高度，但在昨天練習(xí)切圖的過程中汁蝶，發(fā)現(xiàn)將一行內(nèi)聯(lián)元素在垂直方向上對(duì)齊很困難，特別是包含img元素论悴，于是決定深入了解一下這行內(nèi)元素的細(xì)節(jié)
1.內(nèi)聯(lián)元素整體簡介
? ? ?1.分類：內(nèi)聯(lián)元素分為替換元素和非替換元素
MDN上對(duì)可替換元素是這么說的
In?CSS, a?replaced element?is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.
Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as?<iframe>?elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.
The only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box
翻譯過來就是
在CSS中掖棉，被替換的元素是表示在CSS范圍之外的元素；它們是表示獨(dú)立于CSS格式模型的外部對(duì)象膀估。
簡單地說幔亥，它們是內(nèi)容不受當(dāng)前文檔樣式影響的元素。使用CSS可以影響被替換元素的位置察纯，但不會(huì)影響被替換元素本身的內(nèi)容帕棉。一些被替換的元素，比如<iframe>元素饼记，可能有自己的樣式表香伴，但是它們不繼承父文檔的樣式。
CSS對(duì)被替換元素的唯一其他影響是握恳，有一些屬性支持控制元素內(nèi)容在其框中的位置。
那替換元素有哪些呢捺僻？（因該還有一個(gè)textarea）
這些特殊的行內(nèi)元素乡洼，雖然不換行，但可以設(shè)置寬高匕坯，四周padding和margin
而普通的行內(nèi)元素（非替換元素束昵，向span，a等）不能設(shè)置寬高葛峻，四周margin無效锹雏，四周padding有效，
但上下padding比較特殊术奖，不會(huì)撐大內(nèi)容區(qū)礁遵，但會(huì)撐大行高(line-height),下面我們細(xì)說
2.行內(nèi)元素細(xì)節(jié)
！此處注意：雖然替換元素特殊采记，但也是行內(nèi)元素佣耐，下面介紹行內(nèi)元素的一些概念
1.基線：
每個(gè)行內(nèi)元素都有一條基線，規(guī)則如下
1.非替換元素中的基線是英文字母x的下端唧龄，什么意思兼砖，如圖，紅色的就是這個(gè)非替換元素的基線
2.替換元素中的基線就是margin-bottom的外沿
2.行框和行高(line-height)
有了基線的知識(shí)，我們現(xiàn)來說說一行的行內(nèi)元素是怎么排列的耽梅，只有兩步
1.找到本行第一個(gè)行內(nèi)元素薛窥，確定它的基線
2.找到下一個(gè)行內(nèi)元素，確定它的基線并與第一個(gè)基線對(duì)齊褐墅，以此類推拆檬，直到排完本行內(nèi)的所有行內(nèi)元素
等一行的行內(nèi)元素都排完了，這一行的行框就確定了妥凳，為什么叫行框竟贯，那肯定是把一行的行內(nèi)元素都包含進(jìn)去的框嘛，所以說行框的高度就是本行內(nèi)最高的行內(nèi)元素的top line 到最低的行內(nèi)元素的bottom line逝钥。
line-height就是行內(nèi)元素的內(nèi)容區(qū)+padding屑那，也就是一個(gè)行內(nèi)元素的top line 到bottom line的距離
所以設(shè)置line-height為父盒子高度的一半就可以把元素?cái)D到中間。
3.vertical-align
設(shè)置行內(nèi)元素和本行框基線的對(duì)齊方式
