簡述什么是盒子模型（簡述什么是盒子模型的概念）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于簡述什么是盒子模型的問題，以下是小編對(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、請(qǐng)簡述 css 盒子模型與css怪異盒模型

• 2、css盒子模型及盒子模型的類型

• 3、CSS中的標(biāo)準(zhǔn)盒子模型和怪異盒子模型

• 4、什么是CSS的盒子模型

一、請(qǐng)簡述 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)頁中，一個(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;

二、css盒子模型及盒子模型的類型

轉(zhuǎn)自 菜鳥教程

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括： 邊距（外邊距） ， 邊框 ， 填充（內(nèi)邊距） ，和 實(shí)際內(nèi)容 。

盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

轉(zhuǎn)自 鏈接

盒子模型有兩種，分別是W3C盒子模型(標(biāo)準(zhǔn)盒模型)和IE盒子模型(怪異盒模型)

1.標(biāo)準(zhǔn)盒模型中width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content的高度。

2.標(biāo)準(zhǔn)盒模型下盒子的大小 = content + border + padding + margin

1.怪異盒模型中的width指的是內(nèi)容、邊框、內(nèi)邊距總的寬度（content + border + padding）；height指的是內(nèi)容、邊框、內(nèi)邊距總的高度

2.怪異盒模型下盒子的大小=width（content + border + padding） + margin

建議不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

即box-sizing屬性可以指定盒子模型種類，content-box指定盒子模型為W3C（標(biāo)準(zhǔn)盒模型），border-box為IE盒子模型（怪異盒模型）。

三、CSS中的標(biāo)準(zhǔn)盒子模型和怪異盒子模型

原文鏈接： https://blog.csdn.net/qq_41145685/article/details/104464232

—————————————————————

一、什么是盒子模型(Box Model)

盒子想必大家都是知道的吧！

生活中我們的快遞有盒子包裝著，買的蛋糕也是有盒子包裝著，我們的禮品也是被盒子包裝著。

模型是什么呢？

它是主觀意識(shí)借助實(shí)體或者虛擬表現(xiàn)構(gòu)成客觀闡述形態(tài)結(jié)構(gòu)的一種表達(dá)目的的物件

css中的盒子模型它是可以對(duì)元素進(jìn)行布局，設(shè)置距離的大小，這里面包括含有外邊距、邊框、內(nèi)邊距和內(nèi)容主體這四個(gè)部分。

二、CSS中的標(biāo)準(zhǔn)盒子模型(W3c標(biāo)準(zhǔn)的盒子模型)

CSS中的盒子模型也是主觀意識(shí)借助實(shí)體或者虛擬表現(xiàn)構(gòu)成客觀闡述形態(tài)結(jié)構(gòu)的一種表達(dá)目的的物件，在網(wǎng)頁的實(shí)體中我們是看不見實(shí)際盒子模型的。但是我們能夠清楚的看到它起到的作用。

1、盒子模型由” content(內(nèi)容)+padding(內(nèi)邊距)+border(邊框)+margin(外邊距)“四個(gè)部分組成

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。

Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。

Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。

Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

2、標(biāo)準(zhǔn)盒子模型的計(jì)算

如圖：

標(biāo)準(zhǔn)的盒子模型的大小是：content(區(qū)域內(nèi)容大小)+padding(內(nèi)邊距)+border(邊框)+margin(外邊距)；

注：標(biāo)準(zhǔn)盒子的初始設(shè)置寬高大小不包含padding、border和margin的大小。

三、怪異盒子模型(IE標(biāo)準(zhǔn)的盒子模型)

1、怪異盒模型也叫IE盒子模型

怪異盒主要表現(xiàn)在IE內(nèi)核瀏覽器中，當(dāng)前大部分瀏覽器支持的是W3C的標(biāo)準(zhǔn)盒子模型，不過其他瀏覽器也保留了IE盒子模型的支持，需要在CSS中添加觸發(fā)怪異盒的條件。

怪異盒子(IE盒子模型)的觸發(fā)條件：

(1) 給元素添加CSS3屬性box-sizing:border-box; (注：所以如果用CSS3新屬性，就不要考慮低版本瀏覽器了)

(2)文檔結(jié)構(gòu)的doctype不寫，這個(gè)是在IE8 IE7 IE6 IE5等低版本上有，測(cè)試可以在win7系統(tǒng)上比較老舊的IE瀏覽器上，win10自帶的新IE瀏覽器不可以。

2、怪異盒子(IE盒子模型)模型的計(jì)算

如圖可見添加了怪異盒的div盒子寬度變小了。

標(biāo)準(zhǔn)的盒子模型的大小是：content(區(qū)域內(nèi)容大小)+margin(外邊距)；

注：怪異盒子的初始設(shè)置寬高大小包含padding、border大小在內(nèi)，但不包含margin的大小。

四、什么是CSS的盒子模型

網(wǎng)頁設(shè)計(jì)中常聽的屬性名:內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?箱子)上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。

CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。

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

推薦閱讀：

簡述商業(yè)廣告的分類（簡述商業(yè)廣告的分類）

簡述市場(chǎng)細(xì)分的理論基礎(chǔ)（簡述市場(chǎng)細(xì)分的理論基礎(chǔ)是）

簡述幾種市場(chǎng)定位策略（簡述幾種市場(chǎng)定位策略的優(yōu)缺點(diǎn)）

快手里的快幣怎么獲得（快手里面的快幣怎么獲得）

瀘州幼兒園景觀設(shè)計(jì)案例（瀘州幼兒園景觀設(shè)計(jì)案例分析題）