CSS box model 盒模型

bovenson 發布于2019-08-30 15:53 / 1563人閱讀

摘要：盒模型是中的一個重要概念，它是元素大小的呈現方式。背景被裁剪到內邊距框。

box model

盒模型(box model)是CSS中的一個重要概念，它是元素大小的呈現方式。需要記住的是："every element in web design is a rectangular box"。如圖：

Some hints and ideas:

By default background-color/background-image extend to the edge of the border. This behaviour can be changed using the background-clip property

If the content box becomes larger than the example output window, it will overflow out of the window, and scroll bars will appear to allow you to scroll the window to view the rest of the box. You can control overflow with the overflow property — see also the Overflow section below.

Box heights don"t observe percentage lengths; box height always adopts the height of the box content, unless a specific absolute height is set (e.g. pixels or ems.) This is more convenient than the height of every box on your page defaulting to 100% of the viewport height.

Borders ignore percentage width settings too.

You should have noticed that the total width of a box is the sum of its width, padding-right, padding-left, border-right, and border-left properties. In some cases it is annoying (for example, what if you want to have a box with a total width of 50% with border and padding expressed in pixels?) To avoid such problems, it"s possible to tweak the box model with the property box-sizing. With the value border-box, it changes the box model to this new one:

the box that is applied to : `box-sizing : border-box`

summary

background-clip

盒子高度不遵守百分比高度,而是采用內容的高度，除非設置固定高度

border不能使用百分比

怪異盒模型

box-sizing

The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.

content-box（默認）

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

box-sizing 使用場景

the submit btn"s box-sizing in the form is box-content by default

if you wanna add padding or border without making the child box spill out of the parent div

http://www.jianshu.com/p/3375...

background-clip

border-box 背景被裁剪到邊框盒。

padding-box 背景被裁剪到內邊距框。

content-box 背景被裁剪到內容框。





div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url("https://mdn.mozillademos.org/files/11947/ff-logo.png");
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

云服務器 GPU云服務器模型Model 盒模型盒模型html嗎簡述html盒模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116663.html

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

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

Barry_Ng 2019-08-28 17:51 評論0 收藏0
視覺格式化模型(Visual formatting model)

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

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

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

miracledan 2019-08-30 14:01 評論0 收藏0
盒模型(Box model)

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

gecko23 2019-08-29 12:28 評論0 收藏0
CSS規范 > 8 盒模型 Box Model

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

suemi 2019-08-28 18:14 評論0 收藏0