在網(wǎng)頁中,每個(gè)元素都是作為矩形盒被描繪/渲染的。盒模型描述了元素的content,padding,border,margin是如何決定元素所占據(jù)的空間,也描述了它和頁面中其它元素的關(guān)系。
根據(jù)元素的display屬性皱碘,元素的box分為2類:block box和inline box。盒模型被應(yīng)用于這2類時(shí)隐孽,有所不同癌椿。在這片文章中我們會(huì)看到盒模型是如何被應(yīng)用于inline box。
inline盒和line盒
inline box被水平放置在line box中菱阵。
如果在一行中容納不下所有的元素踢俄,就在第一個(gè)line box的下一行創(chuàng)建一個(gè)新的line box。因此一個(gè)單獨(dú)的inline元素就被2行分割開(如下圖所示)
inline box的盒模型
當(dāng)一個(gè)inline box被多行分割后晴及,它在邏輯上仍然是一個(gè)單獨(dú)的box都办。這就意味著任何水平的padding,border,margin僅僅應(yīng)用于被box占據(jù)的首行和末行。
例如虑稼,下圖中高亮的span被2行分割琳钉。它的水平padding不適用首行的末尾和第二行的開始。
當(dāng)然蛛倦,元素垂直方向上的padding, border, margin不會(huì)推開在它上下的元素歌懒。
不過要注意,垂直方向的padding, border也被應(yīng)用了溯壶,并且padding也推開了border及皂。
如果你需要調(diào)整行與行之間的高度甫男,可是使用line-height代替。
用devtools審查inline box
當(dāng)debug布局問題時(shí)躲庄,擁有一個(gè)能給你完整圖畫的工具是非常重要的查剖。其中一個(gè)就是highlighter钾虐,所有的瀏覽器的devtools中都包含了它噪窘。你可以使用它選擇元素作仔細(xì)的審查,highlighter也給你提供了布局方面的信息效扫。
在上面的例子中倔监,highlighter被用來高亮一個(gè)被多行分割的inline元素。Highligh顯示了幫你對(duì)齊元素的指導(dǎo)菌仁,給出了節(jié)點(diǎn)的尺寸并且展示了盒模型的輪廓浩习。從火狐39開始,被分割的inline元素的盒模型輪廓展示了被元素占據(jù)的每一行济丘。在這個(gè)例子中谱秽,內(nèi)容區(qū)域以淡藍(lán)色顯示并被分為4行。節(jié)點(diǎn)也定義了右padding摹迷,并且highlighter以紫色展示padding區(qū)域疟赊。高亮每個(gè)單獨(dú)的line box對(duì)于理解盒模型是如何被應(yīng)用于inline元素是非常重要的,而且也幫你檢查了行間的距離和inline box的垂直對(duì)齊峡碉。
本文來源:https://hacks.mozilla.org/2015/03/understanding-inline-box-model/