正文

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

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

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

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

文章目錄列表:

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

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

一、什么是盒子模型？

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

二、對盒子模型的理解

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

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

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

包括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 盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子。

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

語法：box-sizing:content-box|border-box|inherit;

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

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

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

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

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

1. 塊級元素（blocklevel）

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

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

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

行內(nèi)元素在DOM樹種同樣是一個節(jié)點。從DOM的角度來看，塊級元素和行內(nèi)元素是沒有區(qū)別的，都是樹上的一個節(jié)點；而從CSS的角度來看，二者有很大的區(qū)別，塊級元素擁有自己的區(qū)域，行內(nèi)元素則沒有。

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

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

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

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

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

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

（2）塊級元素之間的豎直margin

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

（3）嵌套盒子之間的margin

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

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

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

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

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

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

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

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

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

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

模型是什么呢？

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

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

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

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

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

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)盒子模型的計算

如圖：

標(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不寫，這個是在IE8 IE7 IE6 IE5等低版本上有，測試可以在win7系統(tǒng)上比較老舊的IE瀏覽器上，win10自帶的新IE瀏覽器不可以。

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

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

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

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

四、什么是css的盒子模型

CSS盒子模型就是在CSS技術(shù)所使用的一種思維模型。CSS假定所有的HTML文檔元素都生成一個描述該元素在HTML文檔布局中所占空間的矩形元素框，可以形象地將其看作是一個盒子。通過定義一系列與盒子相關(guān)的屬性，可極大地豐富和促進各個盒子乃至整個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ū)和填充的邊界；空白邊位于盒子的最外圍，是添加在邊框外周圍的空間。

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