CSS box model 盒模型

bovenson 发布于2019-08-30 15:53 / 1400人阅读

摘要：盒模型是中的一个重要概念，它是元素大小的呈现方式。背景被裁剪到内边距框。

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

超融合服务器 idc机房托管模型Model 盒模型盒模型html吗简述html盒模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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