對(duì)盒子模型的理解（對(duì)盒子模型的理解和認(rèn)識(shí)）

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

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

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、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、什么是盒子模型啊?能舉個(gè)實(shí)際的例子嗎?

• 2、什么是css的盒子模型

• 3、談?wù)勀銓?duì)css盒模型的理解

• 4、淺談CSS中的盒模型

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

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

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

二、什么是css的盒子模型

CSS盒子模型就是在CSS技術(shù)所使用的一種思維模型。CSS假定所有的HTML文檔元素都生成一個(gè)描述該元素在HTML文檔布局中所占空間的矩形元素框，可以形象地將其看作是一個(gè)盒子。通過定義一系列與盒子相關(guān)的屬性，可極大地豐富和促進(jìn)各個(gè)盒子乃至整個(gè)HTML文檔的表現(xiàn)效果和布局結(jié)構(gòu)。

CSS盒子模型由內(nèi)容區(qū)、填充、邊框和空白邊四部分組成。內(nèi)容區(qū)是盒子模型的中心，呈現(xiàn)盒子的主要信息內(nèi)容；填充是內(nèi)容區(qū)和邊框之間的空間；邊框是環(huán)繞內(nèi)容區(qū)和填充的邊界；空白邊位于盒子的最外圍，是添加在邊框外周圍的空間。

擴(kuò)展資料：

CSS盒子模型特點(diǎn)：

1、豐富的樣式定義：CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

2、易于使用和修改：CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。

3、多頁面應(yīng)用：CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣我們就可以在多個(gè)頁面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁面風(fēng)格的統(tǒng)一。

參考資料來源：百度百科-CSS盒子模型

三、談?wù)勀銓?duì)css盒模型的理解

標(biāo)準(zhǔn)模型 和 IE 盒模型

內(nèi)容： border + content + margin + padding

兩種盒模型的區(qū)別

計(jì)算高度和寬度的方式不同

標(biāo)準(zhǔn)盒模型的計(jì)算方式 是 content 的高度和寬度

IE 盒模型的計(jì)算方式是 content + padding + border

1. 獲取內(nèi)聯(lián)樣式的寬、高.. (只能獲取內(nèi)聯(lián)樣式）

2. 內(nèi)聯(lián)和外聯(lián)樣式都能取到（只支持IE）

3. 所有的都支持

4. 計(jì)算絕對(duì)位置，能獲取4個(gè)元素值 top right width height

對(duì)于行內(nèi)元素 margin-top margin-bottom 設(shè)置無效， margin-left margin-right 有效！ 對(duì)于相鄰的塊級(jí)元素 margin-top 和 margin-bottom 兩者疊加按照一定的規(guī)則

（1） 都是整數(shù) margin值取兩者的最大值

（2） 都是負(fù)數(shù) margin值取最小值

（3）兩者正負(fù)相反，margin值取兩者之和

（1） BFC 這個(gè)元素的垂直方向的邊距會(huì)發(fā)生重疊。

（2） BFC 的區(qū)域不會(huì)與浮動(dòng)元素的box重疊

（3） BFC 在頁面是一個(gè)獨(dú)立的容器，內(nèi)外元素互補(bǔ)干涉

（4）計(jì)算 BFC 高度的時(shí)候浮動(dòng)元素也會(huì)參與計(jì)算

根元素：

（1） float 屬性不為 none

（2） position 為 absolute 或 fixed

（3） display 為 inline-block table-cell`````` table-caption``````flex`````` inline-flex

（4） overflow 不為 visible

（2） BFC 不與 float 重疊

（3） BFC 子元素即使是浮動(dòng)元素，也不影響父集元素的計(jì)算。

如果不創(chuàng)建 BFC 父級(jí)元素的高為 0

四、淺談CSS中的盒模型

顯然，盒模型比我想象的，比我最開始在前端課程中學(xué)到的其實(shí)要復(fù)雜得多。

我將現(xiàn)階段學(xué)到的內(nèi)容與過去學(xué)習(xí)所留下的印象進(jìn)行對(duì)比，得出了如下我以為CSS盒模型中的難點(diǎn)和容易被忽視的點(diǎn)。

它是一切開始的基礎(chǔ)

在MDN的文章中，盒模型被分為 標(biāo)準(zhǔn)盒模型 和 替代盒模型 。

通常我們一開始學(xué)習(xí)的盒模型是標(biāo)準(zhǔn)盒模型，它的width和heigth屬性所設(shè)置的是content的寬度和高度，而不是盒子部分的寬度和高度（把border和它所圍起來的部分叫盒子部分）

所以在練習(xí)布局的時(shí)候，我們有時(shí)候會(huì)覺得這個(gè)width和heigth很怪，并不能很方便直接地將我們心中所想象的布局表達(dá)出來，有時(shí)甚至需要計(jì)算。

而替代盒模型更符合我們的直覺。替代盒模型中的width heigth所指即為border所包括部分的width heigth.

將瀏覽器默認(rèn)的標(biāo)準(zhǔn)盒模型改為替代盒模型

margin可以有負(fù)數(shù)，而padding不可以為負(fù)數(shù)。

負(fù)數(shù)意味著樣式會(huì)重疊入侵。

[圖片上傳失敗...(image-b2c4e1-1642049365894)]

可以參考視頻: CSS外邊距塌陷 - Web前端工程師面試題講解

折疊的規(guī)則很好理解，大的覆蓋小的，長(zhǎng)的覆蓋短的。

比如A和B的外邊距折疊，A的外邊距為10， B的外邊距為20，那么結(jié)果是AB的間距為20。

外邊距重疊的情況一共有三種。

之所以是垂直方向，是因?yàn)檎郫B發(fā)生在block元素上，block元素并不存在水平相接的情況。

對(duì)于Inline元素，比如說兩個(gè)水平相接的span標(biāo)簽，實(shí)測(cè)是不會(huì)折疊的。

這個(gè)有點(diǎn)復(fù)雜，MDN的說法如下：

舉例如下:

設(shè)置了border:solid, 正常：

將border:solid設(shè)置為none后，出現(xiàn)了折疊。（可以理解為偏移的參照系變化了，未設(shè)置Border，參照變成了上面的divB）

更為深入的探究，等往后遇到了再說吧。

參考： MDN盒模型

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

推薦閱讀：

對(duì)盒子模型的理解（對(duì)盒子模型的理解和認(rèn)識(shí)）

ChatGPT會(huì)帶來什么

四川酒店景觀設(shè)計(jì)加盟（四川酒店景觀設(shè)計(jì)加盟費(fèi)多少）