盒模型

盒模型注意点

1. padding 不能为负值，margin 可以为负值。
2. 背景色会平铺到非 margin 的区域（即包括 content、padding、border）。
3. margin-top 传递现象 - 外边距高度坍塌。
4. margin 上下叠加现象 - 外边距高度合并。

块盒

如：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…… 特性：

1. 独占一行。
2. 支持所有样式。
3. 不写宽度时，跟父容器宽度相同。

行盒

行盒，如：a、span 、b、u、i、s、strong、ins、em、del……

特性：

1. 盒子不会换行。
2. 不支持某些样式，如：width、height。
3. 宽度由内容决定。

行内块元素

行内块元素，如：input、select、textarea、button……

特性：

1. 盒子不会换行。
2. 支持所有样式。
3. 不写宽度时，宽度由内容决定。

标准盒模型 & 怪异盒模型

标准盒模型：

• padding 加上 border 再加上 width、height才会一起决定盒子大小。
• content-box：width、height = content

怪异盒模型：

• 所有宽度都是可见宽度，所有内容宽度是该宽度减去边框和填充部分。
• border-box：width、height = content + padding + border

常见问题

上下边距重叠

提示

亦或者称为“外边距高度坍塌”、“外边距合并” 等。

上下边距重叠（Margin Collapse）：指垂直方向相邻的块级元素之间的 margin 会合并为一个，取最大值而不是相加。

解决方法：

1. 给父元素设置 border-top 或者 padding-top（分隔父子元素的 margin-top）
2. 给父元素设置 overflow: hidden
3. 转换成行内块元素
4. 设置浮动

行内元素的 margin 和 padding 无效情况

行内元素设置 margin 和 padding 时：

1. 水平方向的 margin 和 padding 布局中有效！
2. 垂直方向的 margin 和 padding 布局中无效！

盒模型宽度计算

<style>
  #div1 {
    width: 100px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

<!-- 
	div1 的 offsetWidth 多大？		122
	div1 的 offsetWidth 如何调整为 100px？		box-sizing: border-box;
-->
<div id="div1"></div>

margin 负值情况

• margin-top：自生元素上移。
• margin-right：自身元素不影响。
• margin-left：自身元素左移。
• margin-bottom：自身元素不影响。

outline 和 border 的区别？

outline：

• outline 属于“外边框”，向外扩展。
• 不支持圆角。
• 不会导致重排。

border：

• border 属于“内边框”，向四周扩展。
• 支持圆角。
• 会导致重排。