盒模型

CSS basic box model

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。

每个盒子由四个部分（区域）组成，内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

• width 和 height 设置内容框（content box）的宽度和高度。
• padding 表示元素的内边距。
• border 表示元素的边框。
• margin 表示元素的外边距。

box-sizing

box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。

• content-box：默认值，标准盒模型。width 和 height 只包括内容的宽高。
  width/height = 内容的宽度/高度
• border-box：IE 盒模型。width 和 height 包括内容、内边距和边框。 width/height = border + padding + 内容的宽度/高度
• padding-box（已弃用）：width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。

overflow

overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

为使 overflow 有效果，块级容器必须有一个指定的高度（height 或者 max-height）或者将 white-space 设置为 nowrap。