正文

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

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

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

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

只需要輸入關鍵詞，就能返回你想要的內容，越精準，寫出的就越詳細，有微信小程序端、在線網頁版、PC客戶端

官網：https://ai.de1919.com。

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

本文目錄:

1、CSS盒模型分成W3C標準盒模型和IE模型
2、什么是盒子模型？
3、請簡述 css 盒子模型與css怪異盒模型
4、什么是盒子模型啊?能舉個實際的例子嗎?

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

一、CSS盒模型分成W3C標準盒模型和IE模型

W3C標準盒模型(默認)：box-sizing: content-box

padding和border都會撐開盒子，改變盒子的寬度高度

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

內盒寬度：width + 左右border寬度 + 左右padding寬度

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

padding和border都不會撐開盒子，不會改變盒子的寬度，盒子的內容會相應縮小

總寬度：width + 左右margin寬度

內盒寬度： width

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

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

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

原因：

（1）margin 會有外邊距合并

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

（3）width 沒有問題我們經常使用寬度剩余法來做

padding margin 百分比

當margin和padding的值設置為百分比時，是相對于最近的塊級或內聯塊父元素width（非總寬度）的相應百分比的值。

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

margin塌陷問題

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

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

解決方法：

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

</div>

</div>

.container {

overflow: hidden;

}

.child {

width: 100px;

height: 100px;

background: #f0;

margin: 100px;

}

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

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

解決方法：

給父元素加 overflow：hidden，相當于給父元素添加了一個BFC

給父元素加上內邊距或上邊框

BFC

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

BFC觸發(fā)條件：

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

float：除 none 以外的值

display： inline-block、flex

position：absolute、fixed

BFC作用：

BFC解決margin塌陷問題

BFC解決浮動元素引起父元素高度塌陷問題

在通常情況下父元素的高度會被子元素撐開，而如果父元素沒有設置高度，其子元素均為浮動元素，此時父元素會發(fā)生了高度坍塌，上下邊界重合，即浮動元素無法撐起父元素。這時就可以用BFC來清除浮動了，將父元素整體設置為BFC環(huán)境

BFC解決元素被浮動元素覆蓋問題

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

龍華大道1號 http://www.kinghill.cn/Dynamics/2106.html

二、什么是盒子模型？

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

三、請簡述 css 盒子模型與css怪異盒模型

1、盒模型與怪異模型的設置

當設置為box-sizing:content-box時，將采用標準模式解析計算（默認模式）；

當設置為box-sizing:border-box時，將采用怪異模式解析計算；

2、盒模型

在網頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），

元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分，

這就是盒子模型。

在標準模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin

3、怪異盒模型

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

四、什么是盒子模型啊?能舉個實際的例子嗎?

什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin).在黑馬程序員學習時候就會有老師教過，

CSS盒子模式這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西；而內邊距(padding)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框(border)就是盒子紙板的厚度；至于外邊距(margin)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。內容(content)就是盒子里裝的東西. 在網頁設計上，內容(content)常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。

以上就是關于盒子模型種類相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內容。