css行內(nèi)框和塊框的區(qū)別有哪些

本篇內(nèi)容介紹了“css行內(nèi)框和塊框的區(qū)別有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

區(qū)別：1、行內(nèi)框不遵守嚴(yán)格的盒模型，而塊框遵守。2、塊框在瀏覽器中所占空間由元素大小，內(nèi)邊距，邊框和外邊距構(gòu)成；而行內(nèi)框由元素大小決定。3、行內(nèi)框無(wú)法設(shè)置高度，塊框可以。4、行內(nèi)框中瀏覽器會(huì)忽視padding和margin的設(shè)置，塊框不會(huì)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

大家都知道DOM元素在css樣式的定義下分為內(nèi)聯(lián)元素和塊元素。由于瀏覽器的盒模型我們可以把元素看成一個(gè)個(gè)框，所以這兩種分類又叫做行內(nèi)框和塊框。本篇文章旨在介紹瀏覽器對(duì)這兩種框不同的呈現(xiàn)模式。

塊框（塊元素）

嚴(yán)格遵守盒模型—-某個(gè)元素在瀏覽器中所占空間由元素大小，內(nèi)邊距，邊框和外邊距構(gòu)成，還服從外邊距疊加原則。所謂外邊距疊加原則準(zhǔn)確的來(lái)說(shuō)并不是求和原則而是求最大原則。例如：

(1)上下兩個(gè)緊挨著的div元素，上面的div元素設(shè)置了margin-bottom，下面的div元素設(shè)置了margin-top，加入給這兩個(gè)div都加上一個(gè)border，那么這時(shí)候這兩個(gè)div在瀏覽器中呈現(xiàn)出來(lái)的效果并不是兩個(gè)邊框之前相距margin-botton + margin-top的和，而是相距兩個(gè)值中的最大的那個(gè)。

(2)不僅對(duì)于不同且相鄰的塊元素由margin疊加原則，對(duì)于同一個(gè)元素相鄰的margin也有疊加規(guī)則。想想空元素，它的外上邊距和外下邊距不就是直接相鄰的嗎？

行內(nèi)框（內(nèi)聯(lián)元素）

行內(nèi)元素不遵守嚴(yán)格的盒模型。它在瀏覽器中垂直占據(jù)的位置只由元素的大小決定并且無(wú)法用css為行內(nèi)框設(shè)置高度，且瀏覽器會(huì)忽視padding和margin的設(shè)置 。

對(duì)于margin我們無(wú)論設(shè)置什么值都沒(méi)有效果，但是對(duì)于行內(nèi)框有一個(gè)padding陷進(jìn)。

舉例來(lái)說(shuō)，如果在頁(yè)面寫一個(gè)span，為它加上border線，然后改變padding的值，這時(shí)邊界框就會(huì)變高，表面上看起來(lái)padding的值撐起了行內(nèi)框的高度，整個(gè)框的高度由元素高和上下內(nèi)邊距組成，但是如果你在該span下面寫一個(gè)div，那么問(wèn)題來(lái)了。

div并不會(huì)和span隔pandding那么寬，而是直接在span元素行高結(jié)束的地方另起一行。

這就說(shuō)明了瀏覽器對(duì)于span盒子的解釋和塊框完全不同，垂直方向的padding，margin并不會(huì)為該元素在瀏覽器中占據(jù)空間行內(nèi)框的高度只由行內(nèi)框的內(nèi)容自動(dòng)撐起，因?yàn)檫@種方式所以唯一改變行內(nèi)框高度的方法就是為行內(nèi)元素設(shè)置行高。

說(shuō)明：

• 行內(nèi)框的高度=文字高度+行間距

• 行框高度= 最高的行內(nèi)框頂部-最低行內(nèi)框底部

存在最高和最低的區(qū)分是因?yàn)橥恍袃?nèi)可能有大小不同的字體，上下位置不同的字體，因此存在不同的行內(nèi)框高度。

從大的層面理解，行內(nèi)框針對(duì)個(gè)體，行框針對(duì)一個(gè)整體。

如下圖，box所在的框，是整行的最高點(diǎn)和最低點(diǎn)，行框由它撐起來(lái)。

所以行框=box的行內(nèi)框。

其他小框就是各個(gè)文字自己的行內(nèi)框了。

“css行內(nèi)框和塊框的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！