CSS box model 盒模型

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 使用场景

1. the submit btn's box-sizing in the form is box-content by default
2. 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 class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

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