正文

盒子模型種類（盒子模型種類及主要區(qū)別）

發(fā)布時(shí)間：2023-04-06 19:53:14 稿源：創(chuàng)意嶺閱讀： 131

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于盒子模型種類的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解相關(guān)業(yè)務(wù)請(qǐng)撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、CSS盒模型分成W3C標(biāo)準(zhǔn)盒模型和IE模型
2、什么是盒子模型？
3、請(qǐng)簡(jiǎn)述 css 盒子模型與css怪異盒模型
4、什么是盒子模型啊?能舉個(gè)實(shí)際的例子嗎?

盒子模型種類（盒子模型種類及主要區(qū)別）

一、CSS盒模型分成W3C標(biāo)準(zhǔn)盒模型和IE模型

W3C標(biāo)準(zhǔn)盒模型(默認(rèn))：box-sizing: content-box

padding和border都會(huì)撐開(kāi)盒子，改變盒子的寬度高度

總寬度：width + 左右border寬度 + 左右padding寬度 + 左右margin寬度

內(nèi)盒寬度：width + 左右border寬度 + 左右padding寬度

IE盒模型：box-sizing: border-box

padding和border都不會(huì)撐開(kāi)盒子，不會(huì)改變盒子的寬度，盒子的內(nèi)容會(huì)相應(yīng)縮小

總寬度：width + 左右margin寬度

內(nèi)盒寬度： width

盒子模型布局穩(wěn)定性

我們根據(jù)穩(wěn)定性來(lái)分，建議如下：

按照優(yōu)先使用寬度，其次使用內(nèi)邊距，再次外邊距。即：width > padding > margin

原因：

（1）margin 會(huì)有外邊距合并

（2）padding 會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算（麻煩）其次使用

（3）width 沒(méi)有問(wèn)題我們經(jīng)常使用寬度剩余法來(lái)做

padding margin 百分比

當(dāng)margin和padding的值設(shè)置為百分比時(shí)，是相對(duì)于最近的塊級(jí)或內(nèi)聯(lián)塊父元素width（非總寬度）的相應(yīng)百分比的值。

即使是margin-top、margin-bottom、padding-top、padding-bottom，設(shè)置為百分比時(shí)也是以最近塊級(jí)父元素的width（非總寬度）為基準(zhǔn)，而非height。

margin塌陷問(wèn)題

相鄰塊元素垂直外邊距的合并

當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

解決方法：

將其放在不同的 BFC 父容器中

</div>

</div>

.container {

overflow: hidden;

}

.child {

width: 100px;

height: 100px;

background: #f0;

margin: 100px;

}

嵌套塊元素垂直外邊距的合并

對(duì)于兩個(gè)嵌套關(guān)系的塊元素，必須是block元素。如果父元素沒(méi)有上內(nèi)邊距padding、沒(méi)有上邊框border、沒(méi)有內(nèi)容，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距取其較大者。即使父元素的上外邊距為0，也會(huì)發(fā)生合并。

解決方法：

給父元素加 overflow：hidden，相當(dāng)于給父元素添加了一個(gè)BFC

給父元素加上內(nèi)邊距或上邊框

BFC

BFC 全稱為塊格式化上下文 (Block Formatting Context) 。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用

BFC觸發(fā)條件：

overflow：除 visible 以外的值 (hidden、auto、scroll)

float：除 none 以外的值

display： inline-block、flex

position：absolute、fixed

BFC作用：

BFC解決margin塌陷問(wèn)題

BFC解決浮動(dòng)元素引起父元素高度塌陷問(wèn)題

在通常情況下父元素的高度會(huì)被子元素?fù)伍_(kāi)，而如果父元素沒(méi)有設(shè)置高度，其子元素均為浮動(dòng)元素，此時(shí)父元素會(huì)發(fā)生了高度坍塌，上下邊界重合，即浮動(dòng)元素?zé)o法撐起父元素。這時(shí)就可以用BFC來(lái)清除浮動(dòng)了，將父元素整體設(shè)置為BFC環(huán)境

BFC解決元素被浮動(dòng)元素覆蓋問(wèn)題

如果有兩個(gè)相鄰元素，第一個(gè)元素左浮動(dòng)，第二個(gè)元素不設(shè)置浮動(dòng)，這時(shí)候第二個(gè)元素會(huì)有部分被浮動(dòng)元素所覆蓋(但是文本信息不會(huì)被浮動(dòng)元素所覆蓋)。如果想避免元素被覆蓋，可觸發(fā)第二個(gè)元素的 BFC 特性，在第二個(gè)元素中加入 overflow: hidden即可

龍華大道1號(hào) http://www.kinghill.cn/Dynamics/2106.html

二、什么是盒子模型？

在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分。這四個(gè)部分占有的空間中，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來(lái)分隔相鄰的區(qū)域或區(qū)域。4個(gè)部分一起構(gòu)成了css中元素的盒模型。

三、請(qǐng)簡(jiǎn)述 css 盒子模型與css怪異盒模型

1、盒模型與怪異模型的設(shè)置

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算（默認(rèn)模式）；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；

2、盒模型

在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容（content），

元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分，

這就是盒子模型。

在標(biāo)準(zhǔn)模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin

3、怪異盒模型

在怪異模式下，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;

四、什么是盒子模型啊?能舉個(gè)實(shí)際的例子嗎?

什么是CSS的盒子模式呢？為什么叫它是盒子？先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin).在黑馬程序員學(xué)習(xí)時(shí)候就會(huì)有老師教過(guò)，

CSS盒子模式這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解，日常生活中所見(jiàn)的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而內(nèi)邊距(padding)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框(border)就是盒子紙板的厚度；至于外邊距(margin)則說(shuō)明盒子擺放的時(shí)候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時(shí)也為了方便取出嘛。內(nèi)容(content)就是盒子里裝的東西. 在網(wǎng)頁(yè)設(shè)計(jì)上，內(nèi)容(content)常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈性，里面的東西大過(guò)盒子本身最多把它撐大，但它不會(huì)損壞的。

以上就是關(guān)于盒子模型種類相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。