CSS 盒子模型

在讲盒子模型之前，先罗列一下涉及到的基础知识。

盒子尺寸区域

标准盒子模型

IE盒子模型

行内/块级元素

行内元素（inline）

• 特点（砖块） 1. 和其他元素在一行中； 2. 高度、宽度都是不可控的 3. 宽高就是内容的高度，不可以改变 4. 行内元素只能包含行内元素，不能包含块级元素
• 例如：<span>、<input>、<a>、<textarea>、<select>

块级元素（block）

• 特点（流水） 1. 总是从新的一行开始 2. 高度、宽度都是可控的 3. 宽度没有设置时，默认为 100% 4. 块级元素中可以包含块级元素和行内元素
• 例如：<h1>、<div>、<p>、<ul>

行内-块级元素（inline-block）

• 特点：可以设置高度、宽度、内边距等的块级元素

height/width

height

• 默认值：auto
• 百分比：基于包含它的块级对象的百分比高度。（如果包含块的高度没有显示指定，即为 auto，并且该元素不是绝对定位，则百分比计算值也为 auto）

width

• 默认值：auto（行内元素由内容决定，体现收缩性、包裹性；块级元素有父级容器空间决定，体现为充分利用可用空间）
• 百分比：定义基于包含块（父元素）宽度的百分比宽度。

正文

content

替换元素

• 概念：通过修改某个属性值呈现的内容就可以被替换的元素
• 例如：<img>、<input>、<video>、<textarea>...
• 尺寸计算：内容固有尺寸（由 src 决定，无法改变） < HTML尺寸 < css 尺寸，其中 ::before、::after 伪元素表现为固有尺寸，无法通过 width、height 改变

::before/::after 伪元素

• 概念：默认情况下，这个两个伪元素在真正页面元素内部之前和之后添加新内容，添加的内容默认是inline元素
• 特点： 1. 伪元素不属于文档，即不占用 dom 结点，所以js无法操作它 2.伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
• 计数器（用得少，暂不做说明）

padding

• 百分比：水平方向上和垂直方向上均是相对于宽度计算的
• 内联元素中的 padding：会影响布局、外部尺寸、视觉表现，但是在垂直方向上对上下元素的原本布局没有任何影响，表现为层叠

margin

• 百分比：水平方向上和垂直方向上均是相对于宽度计算的
• auto：
  • 填充规则： 1. 一侧定值，一侧auto，auto为剩余空间大小 2. 两侧都是 auto，平分剩余空间
  • 定高元素垂直方向上 margin：auto 无效原因： height 相关计算依赖于其自身内容高度，自身内容高度是不能最初确定值的
• margin合并：
  • 场景： 1. 相邻兄弟元素 margin 合并 2. 父级和第一个/最后一个子元素（父子margin合并） 3. 空块级元素的 margin 合并（上下 margin 合并）
  • 计算规则： 1. 正正取最大值 2. 正负值相加 3. 负负最负值

border

比较简单，不做详细说明

• border-width 不支持百分比

   

内联盒子模型

在每个行框盒子前面有一个宽度为0的具有该元素的字体和行高属性的 空白结点