相對于熟知的塊級格式化上下文，行內格式化上下文更加的復雜難明。行內元素不像塊級元素那樣直來直去，一個塊級元素占據(jù)一行，其他塊級元素在垂直方向依次向下排列即可。行內元素不同，多個行內元素可以在一行顯示，那么，在一行中多個行內元素是怎么排布的，下面就試著解釋一下。

構建一行

首先我們來理解一行由哪些東西構成：

<p>xem<span>行內框</span><img style="width: 40px; height: 40px; margin: 10px;" src="" /> </p>

上面有一個匿名文本，一個行內框也就是行內非替換元素<span>，一個行內替換元素<img />

匿名文本 xem

是指沒有元素包裹直接暴露在父元素下的文本。

這些文本應該占多大的地方？其實每一個文本字符都會有一個em框（見圖：1-1），那么em框有了，多個em框就組成了一個內容區(qū)（見圖1-1）。好，我們上面的匿名文本就先這樣，當然還沒有完事，下面繼續(xù)。

em框

em框是在字體中定義的，并且高度和font-size的值一致。

圖1-1

行內框

span這樣的行內元素會形成一個行內框（匿名文本也會形成），這個行內框是按照上面匿名文本形成內容區(qū)域的步驟形成內容區(qū)域后在加上行間距形成的。又出現(xiàn)了一個行間距。

行間距又是哪里來的？行間距是行高（line-height）減去內容區(qū)高度得到的。

我們得到了行間距，然后將行間距再除以2分別放在內容區(qū)上面和下面形成了行內框（見圖：1-2）。

圖1-2

img元素

img元素是一個替換元素，替換元素會形成一個內容區(qū)，并且行高不能作用于替換元素，所以對于替換元素來說不存在行間距這個東西。那么替換元素內容區(qū)域的高度是咋計算的？計算方式和非替換元素計算方式不同，不僅有替換原宿自身寬高還包括了padding，border和margin的值。我們都知道非替換元素垂直方向margin，padding和border是不占位置的，但是替換元素是占位置的（見圖：1-3）。

圖1-3

行框

行框中存在了上面幾個元素（不是指的標簽），那么怎么計算行框所占據(jù)的高度？行框會計算，基線與行框最高點，和行框最低點距離即可。

通過這個描述就能看出來，line-height只能表示一個行的最小高度，不是一個行的高度（見圖：1-4）。

圖1-3

基線

基線位置是使用的字體決定的，一般是小寫字母x的下邊緣。

行內格式化完成。

總結

以上是生活随笔為你收集整理的行内格式化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。