共计 4125 个字符，预计需要花费 11 分钟才能阅读完成。
第 4 章 盒尺寸四大家族
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 别离对应 CSS 世界中的 content、padding、border 和 margin 属性。
4.1 深刻了解 content
4.1.1 content 与替换元素
1、什么是替换元素
依据“外在盒子”是内联还是块级咱们能够把元素分为内联元素和块级元素，而依据是否具备可替换内容，咱们也能够把元素分为替换元素和非替换元素。
替换元素，顾名思义，内容能够被替换。
<img src="1.jpg"> 把下面的 1.jpg 换成 2.jpg，图片就会被替换。这种通过 批改某个属性值出现的内容就能够被替换的元素就称为“替换元素”。因而，<img>、<object>、<video>、<iframe> 或者表单元素 <textarea> 和 <input> 都是典型的替换元素。
替换元素除了内容能够替换这一个性以外，还有以下一些个性。
1）内容的外观不受页面上的 CSS 的影响。用业余的话讲就是款式体现在 CSS 作用域之外。（？？？？）
2) 有本人的尺寸。
3）在很多 CSS 属性上有本人的一套规定。比拟具备代表性的就是 vertical-align 属性，对于替换元素和非替换元素，vertical-align 属性值的解释是不一样的。比方说，vertical-align 的默认值 baseline，基线，被定义为字符 x 的下边缘，然而到了替换元素那里就不实用了。因为替换元素的内容往往不可能含有字符 x，于是替换元素的基线被硬生生定义成了元素的下边缘。
2、替换元素的默认 display 值
所有的替换元素都是内联程度元素，也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。然而，替换元素默认的 display 值却是不一样的。
3、替换元素的尺寸计算规定
1）固有尺寸指的是替换内容本来的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着本人的宽度和高度。这个宽度和高度的大小就是这里的“固有尺寸”。
2）HTML 尺寸这个概念稍微形象，咱们无妨将其设想成水煮蛋外面的那一层红色的膜，外面是“固有尺寸”这个蛋黄蛋白，里面是“CSS 尺寸”这个蛋壳。“HTML 尺寸”只能通过 HTMl 原生属性扭转，这些 HTML 原生属性包含 <img> 的 width 和 height 属性、<input> 的 size 属性、<textarea> 的 cols 和 rows 属性等。
<img width="300" height="100">
<input type="file" size="30">
<textarea cols="20" rows="5"></textarea>3）CSS 尺寸特指能够通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的尺寸，对应盒尺寸中的 content box。
3 层构造的计算规定如下：
- 如果没有 CSS 尺寸和 HTML 尺寸，则应用固有尺寸作为最终的宽高。
- 如果没有 CSS 尺寸，则应用 HTML 尺寸作为最终的宽高。
- 如果有 CSS 尺寸，则最终尺寸由 CSS 属性决定
- 如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素按照固有的宽高比例显示。
- 如果下面的条件都不合乎（如空内容的状况下，video、canvas、iframe 这些元素），则最终宽度的体现为 300 像素，高度为 150 像素。
- 内联替换元素和块级替换元素应用下面同一套尺寸计算规定。
5、content 与替换元素关系分析
在 CSS 世界中，把 content 属性生成的对象称为“匿名替换元素”。
content 属性生成的内容都是替换元素。
4.2 温和的 padding 属性
4.2.1 padding 与元素的尺寸
CSS 中默认的 box-sizing 是 content-box，所以应用 padding 会减少元素的此村。
对于非替换元素的内联元素，不仅 padding 不会退出行盒高度的计算，margin 和 border 也都是如此，都是不计算高度，但实际上在内联盒四周产生了渲染。
4.2.2 padding 的百分比值
其一，和 margin 属性不同，padding 属性是不反对负值的；其二，padding 反对百分比值，然而，和 height 等属性的百分比计算规定有些差别，差别在于：padding 百分比值无论是程度方向还是垂直方向均是绝对于宽度计算的！
4.2.3 标签元素内置的 padding
padding 属性和 background-clip 属性配合，能够在无限的标签下实现一些 CSS 图形绘制成果。
backgrounf-clip 设置元素的背景（背景图片或色彩）是否延长到边框、内边距盒子、内容盒子上面。
4.3 激进的 margin 属性
padding 性情温和，负责内间距；而 margin 则比拟激进，负责外间距。
4.3.1 margin 与元素尺寸以及相干布局
1、元素尺寸的相干概念
- 元素尺寸：在原生的 DOM API 中写作 offsetWidth 和 offsetHeight，包含 padding 和 border，也就是元素的 border box 尺寸，所以，有时候也称为“元素偏移尺寸”。
- 元素外部尺寸：元素的外部区域尺寸，包含 padding 但不包含 border，也就是元素的 padding box 的尺寸。在原生的 DOM API 中写作 clientWidth 和 clientHeight，所以，有时候也称为“元素可视尺寸”。
- 元素内部尺寸：示意元素的内部尺寸，不仅包含 padding 和 border，还包含 margin，也就是元素的 margin box 的尺寸。没有绝对应的原生的 DOM API。
2、margin 与元素的外部尺寸
margin 同样能够扭转元素的可视尺寸，然而和 padding 简直是互补态势。
什么意思呢？
对于 padding，元素设定了 width 或放弃“包裹性”的时候，会扭转元素可视尺寸；然而对于 margin 则相同，元素设定了 width 值或放弃“包裹性”的时候，margin 对尺寸没有影响，只有元素是“充分利用可用空间”状态的时候，margin 才能够扭转元素的可视尺寸。
4.3.2 margin 的百分比值
和 padding 属性一样，margin 的百分比值无论是程度方向还是垂直方向都是绝对于宽度计算的，不过绝对于 padding，margin 的百分比值的利用价值就低了一截，根本原因在于和 padding 不同，元素设置 margin 在垂直方向上无奈扭转元素本身的外部尺寸，往往须要副元素作为载体，此外，因为 margin 合并的存在，在垂直方向往往须要双倍尺寸能力和 padding 体现统一。
4.3.3 正确看待 CSS 世界里的 margin 合并
1、什么是 margin 合并
块级元素的上外边距和下外边距有时会合并为单个外边距，这样的景象称为“margin 合并”。
重要信息：
1）块级元素，但不包含浮动和相对定位元素，只管浮动和相对定位能够让元素块化。
2）只产生在垂直方向，须要留神的是，这种说法在不思考 writing-mode 的状况下才是正确的，严格来讲，应该是只产生在和以后文档流方向的相垂直的方向上。因为默认文档流是程度流，因而产生 margin 合并的就是垂直方向。
2、margin 合并的 3 种场景
margin 合并有以下 3 种场景。
1）相邻兄弟元素 margin 合并。
2）父级和第一个 / 最初一个子元素。
对于 margin-top 合并，能够进行如下操作（满足一个条件即可）：
- 父元素设置为块状格式化上下文元素（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context）
- 父元素设置 border-top 值；
- 父元素设置 padding-top 值；
- 父元素和第一个子元素之间增加内联元素进行分隔。
对于 margin-bottom 合并，能够进行如下操作（满足一个条件即可）：
- 父元素设置为块状格式化上下文元素；
- 父元素设置 border-bottom 值；
- 父元素设置 padding-bottom 值；
- 父元素和最初一个子元素之间增加内联元素进行分隔；
- 父元素设置 height、min-height 或 max-height。
3）空块级元素的 margin 合并。（空块级元素的上下边距合并。）
对于空块级元素的 margin 合并，能够进行如下操作（满足一个条件即可）：
- 设置垂直方向的 border；
- 设置垂直方向的 padding；
- 外面增加内联元素（间接 Space 键空格是没用的）；
- 设置 height 或者 min-height。
3、margin 合并的计算规定
margin 合并的计算规定总结为“正正取大值”“正负值相加”“负负最负值”3 句话。
4.3.4 深刻了解 CSS 中的 margin:auto
margin:auto 的填充规定如下：
1）如果一侧定值，一侧 auto，则 auto 为残余空间大小。
2）如果两侧均是 auto，则平分残余空间。
4.3.5 margin 有效情景解析
margin 有效的情景：
1）display 计算值 inline 的非替换元素的垂直 margin 是有效的，尽管标准提到有渲染，但浏览器体现却未寻得一点形迹，这和 padding 是有显著区别的。对于内联替换元素，垂直 margin 无效，并且没有 margin 合并的问题，所以图片永远不会产生 margin 合并。
2）表格中的 <tr> 和 <td> 元素或这是 display 计算值是 table-cell 或 table-row 的元素的 margin 都是有效的。然而，如果计算值是 table-caption、table 或 inline-table 则没有此问题，能够通过 margin 管制外间距。
3）margin 合并的时候，更改 margin 值可能是没有成果的。
4）相对定位元素非定位方位的 margin 值“有效”。（看着“有效”）
5）定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“生效”。
6）遥相呼应导致的 margin 有效。（看第六章内容）
7）内联个性导致的 margin 有效。（看第五章内容）