成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS box model 盒模型

bovenson / 1586人閱讀

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

box model

盒模型(box model)是CSS中的一個重要概念，它是元素大小的呈現(xiàn)方式。需要記住的是："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

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

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（默認(rèn)）

布局所占寬度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 背景被裁剪到內(nèi)邊距框。

content-box 背景被裁剪到內(nèi)容框。







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; }

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

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

相關(guān)文章

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

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

    Barry_Ng 評論0 收藏0

  • 視覺格式化模型(Visual formatting model)

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

    jokester 評論0 收藏0

  • CSS中各種布局的背后(*FC)

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

    miracledan 評論0 收藏0

  • 盒模型(Box model)

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

    gecko23 評論0 收藏0

  • CSS規(guī)范 > 8 盒模型 Box Model

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

    suemi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<