盒模型(Box model)

gecko23 發(fā)布于2019-08-29 12:28 / 1494人閱讀

摘要：盒模型描述了一個(gè)為文檔樹中的元素生成的并根據(jù)可視化格式模型進(jìn)行布局的矩形框盒模型和盒模型在計(jì)算總寬度中存在一些差異在模型中和是指的寬度和高度在盒模型中和包含和以及的寬度和高度在中引入了屬性它可以允許改變默認(rèn)的盒模型對元素寬高的計(jì)算方式共包

CSS盒模型描述了一個(gè)為文檔樹中的元素生成的并根據(jù)可視化格式模型進(jìn)行布局的矩形框

IE盒模型和W3C盒模型在計(jì)算總寬度中存在一些差異

在W3C模型中width和height是指content的寬度和高度

在IE盒模型中,width和height包含border和margin以及content的寬度和高度

在CSS3中引入了box-sizing屬性,它可以允許改變默認(rèn)的CSS盒模型對元素寬高的計(jì)算方式

共包含三個(gè)選項(xiàng):

content-box: 瀏覽器定義元素的屏幕寬度和高度的默認(rèn)方法, 會將border寬度和padding厚度與width和height屬性值相加,來確定該標(biāo)簽的屏幕高度和寬度

padding-box: 當(dāng)你在一個(gè)樣式中設(shè)置了width和hight屬性時(shí),它應(yīng)該包含padding作為該值的一部分

border-box: 包含了border寬度和padding厚度,將它們作為width和height的一部分.

盒模型

margin詳解

border詳解

padding詳解

云服務(wù)器 GPU云服務(wù)器模型Model 盒模型盒模型html嗎簡述html盒模型

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111917.html

相關(guān)文章

扯一下似乎被遺忘的盒模型

摘要：不過想想，現(xiàn)在都讓微軟給退下了，還有多少呢。接著就是要提到的一點(diǎn)，盒模型的計(jì)算方式，標(biāo)準(zhǔn)方式和模式是不同的，不知道又想知道的同學(xué)請問谷哥或者度娘吧，記得幾年前我那本破書上也又提到，還做了一些測試。扯遠(yuǎn)了，盒模型大概的情況就是這樣。前段時(shí)間為了組里在擴(kuò)充人員，在面試的過程中有過幾次扯到盒模型這個(gè)東西。對于盒模型以前是經(jīng)常提到，現(xiàn)在被CSS3的風(fēng)頭給蓋下去了，已經(jīng)沒多少人去講盒模型，也導(dǎo)...

Barry_Ng 2019-08-28 17:51 評論0 收藏0
CSS box model 盒模型

摘要：盒模型是中的一個(gè)重要概念，它是元素大小的呈現(xiàn)方式。背景被裁剪到內(nèi)邊距框。 box model 盒模型(box model)是CSS中的一個(gè)重要概念，它是元素大小的呈現(xiàn)方式。需要記住的是：every element in web design is a rectangular box。如圖： showImg(https://segmentfault.com/img/bVWd1z?w=18...

bovenson 2019-08-30 15:53 評論0 收藏0
CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目內(nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0
CSS規(guī)范 > 8 盒模型 Box Model

摘要：當(dāng)兩個(gè)及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關(guān)于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 評論0 收藏0
視覺格式化模型(Visual formatting model)

摘要：塊級盒參與塊格式化上下文。行內(nèi)級盒參與行內(nèi)格式化上下文塊格式化上下文行內(nèi)格式化上下文相對定位浮動(dòng)盒就是一個(gè)在當(dāng)前行向左或向右移動(dòng)的盒。浮動(dòng)絕對定位絕對定位模型中，一個(gè)盒會有相對于其包含塊的明確偏移，它會從常規(guī)流中全部移除不會影響后面的兄弟。在可視化格式模型(Visual formatting model)當(dāng)中,文檔樹中的每個(gè)元素根據(jù)其盒模型生成0個(gè)或多個(gè)盒.這些盒的布局由(以下因素)...

jokester 2019-08-30 15:53 評論0 收藏0