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

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

成都創(chuàng)新互聯(lián)公司專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、敖漢網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站制作、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為敖漢等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

塊框（塊元素）

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

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

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

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

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

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

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

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

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

說明：

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

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

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

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

如下圖，box所在的框，是整行的最高點和最低點，行框由它撐起來。

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

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

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

當前標題：css行內(nèi)框和塊框的區(qū)別有哪些
分享路徑：http://bm7419.com/article8/pscdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站策劃、微信小程序、電子商務(wù)、網(wǎng)站維護、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)