正文

簡(jiǎn)述什么是盒子模型（簡(jiǎn)述什么是盒子模型的概念）

發(fā)布時(shí)間：2023-04-04 10:04:44 稿源：創(chuàng)意嶺閱讀： 85 當(dāng)前文章關(guān)鍵詞排名出租

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

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

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(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、請(qǐng)簡(jiǎn)述 css 盒子模型與css怪異盒模型
2、css盒子模型及盒子模型的類型
3、CSS中的標(biāo)準(zhǔn)盒子模型和怪異盒子模型
4、什么是CSS的盒子模型

簡(jiǎn)述什么是盒子模型（簡(jiǎn)述什么是盒子模型的概念）

一、請(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;

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

轉(zhuǎn)自菜鳥教程

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

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

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

下面的圖片說(shuō)明了盒子模型(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)頁(yè)的實(shí)體中我們是看不見(jiàn)實(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)盒子模型，不過(guò)其他瀏覽器也保留了IE盒子模型的支持，需要在CSS中添加觸發(fā)怪異盒的條件。