正文

盒子模型都包括什么（盒子模型都包括什么屬性）

發(fā)布時(shí)間：2023-04-07 01:44:34 稿源：創(chuàng)意嶺閱讀： 51

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

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

文章目錄列表:

1、什么是盒子模型？
2、對(duì)盒子模型的理解
3、CSS中的標(biāo)準(zhǔn)盒子模型和怪異盒子模型
4、什么是css的盒子模型

盒子模型都包括什么（盒子模型都包括什么屬性）

一、什么是盒子模型？

在網(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中元素的盒模型。

二、對(duì)盒子模型的理解

（整理自網(wǎng)絡(luò)）

1、盒子模型有兩種，W3C和IE盒子模型（padding-border-margin模型）

從直觀上而言，margin用于控制塊與塊之間的距離。倘若將盒子模型比作展覽館里展出的一幅幅畫(huà)，那么content就是畫(huà)面本身，padding就是畫(huà)面與畫(huà)框之間的留白，border就是畫(huà)框，而margin就是畫(huà)與畫(huà)之間的距離。

包括margin、border、padding、content ，元素的width=content的寬度

其與W3C盒子區(qū)別在于它的content 部分包含了 border 和 padding。

那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c 盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁(yè)的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即 ie 瀏覽器會(huì)采用 ie 盒子模型去解釋你的盒子。

我個(gè)人認(rèn)為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應(yīng)該包含border（邊框）和padding（填充），這個(gè)和我們現(xiàn)實(shí)生活的盒子是一樣的，W3C也認(rèn)識(shí)到自己的問(wèn)題了，所以在 CSS3 中新增了一個(gè)樣式box-sizing，包含兩個(gè)屬性content-box 和 border-box。

語(yǔ)法：box-sizing:content-box|border-box|inherit;

設(shè)置box-sizing:border-box以后，如果想要一個(gè)寬度為200px的盒子，那么我們直接設(shè)置寬度為200px。當(dāng)再設(shè)置它的左右邊框和左右補(bǔ)白后，它的內(nèi)容區(qū)會(huì)自動(dòng)調(diào)整（向里縮進(jìn)）。

DOM是 Document Object Model的縮寫(xiě)，即“文檔對(duì)象模型”。一個(gè)網(wǎng)頁(yè)的所有元素組織在一起，就構(gòu)成了一個(gè)棵“DOM”樹(shù)。

一個(gè)HTML文檔并不是一個(gè)簡(jiǎn)單的文本文件，而是一個(gè)具有層次結(jié)構(gòu)的邏輯文檔，每一個(gè)HTML元素都作為這個(gè)層次結(jié)構(gòu)中的一個(gè)節(jié)點(diǎn)存在。每個(gè)節(jié)點(diǎn)反應(yīng)在瀏覽器上回具有不同的表現(xiàn)形式，具體的表現(xiàn)形式是由CSS來(lái)決定的。

CSS的目的是使網(wǎng)頁(yè)的表現(xiàn)形式與內(nèi)容結(jié)構(gòu)分離，CSS控制網(wǎng)頁(yè)的表現(xiàn)形式，HTML控制網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)。

“標(biāo)準(zhǔn)文檔流”簡(jiǎn)稱(chēng)“標(biāo)準(zhǔn)流”。指在不適用其他的與排版和定位相關(guān)的特殊CSS規(guī)則是，各種元素的排列規(guī)則。

1. 塊級(jí)元素（blocklevel）

總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿(mǎn)。

2. 行內(nèi)元素（inline）

標(biāo)記本身不占有獨(dú)立的區(qū)域，僅僅實(shí)在其他元素的基礎(chǔ)上指出了一定的范圍。

行內(nèi)元素在DOM樹(shù)種同樣是一個(gè)節(jié)點(diǎn)。從DOM的角度來(lái)看，塊級(jí)元素和行內(nèi)元素是沒(méi)有區(qū)別的，都是樹(shù)上的一個(gè)節(jié)點(diǎn)；而從CSS的角度來(lái)看，二者有很大的區(qū)別，塊級(jí)元素?fù)碛凶约旱膮^(qū)域，行內(nèi)元素則沒(méi)有。

標(biāo)準(zhǔn)流就是CSS規(guī)定的默認(rèn)的塊級(jí)元素和行內(nèi)元素的排列方式。

3. 標(biāo)記和標(biāo)記

是一個(gè)塊級(jí)元素，他保衛(wèi)的元素會(huì)自動(dòng)換行。而僅僅是一個(gè)行內(nèi)元素，在它的前后不會(huì)換行。

4. 盒子在標(biāo)準(zhǔn)流中的定位原則

（1）行內(nèi)元素之間的水平margin

當(dāng)兩個(gè)行內(nèi)元素緊鄰時(shí)，他們之間的距離為第一個(gè)元素的 margin-right 加上第2個(gè)元素的margin-left。

（2）塊級(jí)元素之間的豎直margin

兩個(gè)豎直塊級(jí)元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者。這個(gè)現(xiàn)象稱(chēng)為 margin 的“塌陷”現(xiàn)象。

（3）嵌套盒子之間的margin

如果父div的高度值小于子塊div的高度加上margin的值，此時(shí)IE瀏覽器會(huì)自動(dòng)擴(kuò)大，保持子元素的margin-bottom的空間以及父元素自身的padding-bottom。而firefox會(huì)保證父元素的高度完全吻合，子元素會(huì)超出父元素的范圍。

CSS規(guī)范中有四個(gè)寬度和高度的相關(guān)屬性，為：min-height、max-height、min-width、max-width。 IE瀏覽器不支持。

（4）將margin設(shè)置為負(fù)值

當(dāng)margin設(shè)為負(fù)數(shù)時(shí)，會(huì)使被設(shè)為負(fù)數(shù)的塊向相反的方向移動(dòng)，甚至覆蓋在另外的塊上。

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

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

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

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

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

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

模型是什么呢？

它是主觀意識(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)容周?chē)膮^(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ā)怪異盒的條件。

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

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

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

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

如圖可見(jiàn)添加了怪異盒的div盒子寬度變小了。

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

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

四、什么是css的盒子模型

CSS盒子模型就是在CSS技術(shù)所使用的一種思維模型。CSS假定所有的HTML文檔元素都生成一個(gè)描述該元素在HTML文檔布局中所占空間的矩形元素框，可以形象地將其看作是一個(gè)盒子。通過(guò)定義一系列與盒子相關(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ū)和填充的邊界；空白邊位于盒子的最外圍，是添加在邊框外周?chē)目臻g。

盒子模型都包括什么（盒子模型都包括什么屬性）

擴(kuò)展資料：

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

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

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

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

參考資料來(lái)源：百度百科-CSS盒子模型

以上就是小編對(duì)于盒子模型都包括什么問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話，或添加微信。