1 流，元素与基本尺寸

1.1 块级元素

特性:一个水平流上只能单独显示一 个元素，多个块级元素则换行显示

常见的块级元素(div, p, table, li)

“块级元素”和“display 为 block 的元素”不是一个概念

还有一种"标记盒子",用于放圆点、数字这些项目符号

"内在盒子"和"外在盒子"：外在盒子负责元素是可以一行显示，还是只能换行显示;内在盒子负责 宽高、内容呈现什么的。(display: inline-block即外在盒子是inline,内在盒子是block)

我们平时设置的width/height,其实是设置在内在盒子(容器盒子)里的

width: auto的四种表现

1. 充分利用可用空间(默认100%宽度)
2. 收缩与包裹(浮动、绝对定位、inline-block 元素或 table 元素)
3. 收缩到最小(最容易出现在 table-layout 为 auto 的表格中，比如此时内容有长单词)
4. 超出容器限制

在默认情况下，绝对定位元素的宽度表现是“包 裹性”，宽度由内部尺寸决定,对于非替换元素(见本书第 4 章)，当 left/top 或 top/bottom 对立方位的属性值同时 存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性(position 属性值不是 static)的祖先元素计算

内在盒子又分为 content box、padding box、border box 和 margin box四个盒子

宽度分离原则: 所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding/border(有时候包括 margin)属性共存

box-sizing 被直译为“盒尺寸”，实际上，其更准确的叫法应该是“盒尺寸的作用
细节”,用来表示width作用在哪个盒子上(content-box, border-box)

height 和 width 还有一个比较明显的区别就是对百分比单位的支持。对于 width 属性， 就算父元素 width 为 auto，其百分比值也是支持的;但是，对于 height 属性，如果父元素height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了

为何高度不支持百分比设置: 规范中其实给出了答案。如果包含 块的高度没有显式指定(即高度由内容决定)，并且该元素不是绝对定位，则计算值为 auto。一句话总结就是:因为解释成了 auto。要知道，auto 和百分比计算，肯定是算 不了的

绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别 在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算 在内，但是，非绝对定位元素则是相对于 content box 计算的

min-width/min-height 的初始值是 auto，max-width/max- height 的初始值是 none

min-width会覆盖max-width(当且仅当min-width>max-width)

1.2 内联元素

“内联元素”的“内联”特指“外在盒子”，和“display 为 inline 的元素”不是一个概念!

内联元素的一些盒子(特性)

1. 内容区域(content area)。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身 特性控制，本质上是一个字符盒子(character box);但是有些元素，如图片这样的替换元素，其内 容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。（IE 和 Firefox 浏览器下，文字的选中背景总能准确反映内容区域范围）

2. 内联盒子(inline box)。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内 联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类: 如果外部含内联标签(<span>、<a>和<em>等)，则属于“内联盒子”(实线框标注);如 果是个光秃秃的文字，则属于“匿名内联盒子”(虚线框标注)
   3.行框盒子(line box)。例如:

   
   
   
   

   每一行就是一个“行框盒子”(实线框标注)，每个“行框盒子”又是由一个一个“内联盒子” 组成的。

3. 包含盒子(块)(containing box)。例如:

   
   
   包含盒子(块)
   
   

   <p>标签就是一个“包含盒子”(实线框标注)，此盒子由一行一行的“行框盒子”组成。

“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是:在 HTML5 文档声明 中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这 个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样， 但又确确实实地存在，表现如同文本节点一样, 实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行 框盒子”前面，同时具有该元素的字体和行高属性的 0 宽度的内联盒

2 盒尺寸四大家族

2.1深入理解Content

根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素，而根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素

替换元素: 通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素, <img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是替换元素

替换元素的特性:

1. 内容的外观不受页面上的 CSS 的影响
2. 有自己的尺寸;在 Web 中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺 寸(不包括边框)是 300 像素×150 像素
3. 在很多 CSS 属性上有自己的一套表现规则。比较具有代表性的就是 vertical-align 属性，对于替换元素和非替换元素，vertical-align 属性值的解释是不一样的。比方说 vertical-align 的默认值的 baseline，很简单的属性值，基线之意，被定义为字符 x 的 下边缘，在西方语言体系里近乎常识，几乎无人不知，但是到了替换元素那里就不适用了。为 什么呢?因为替换元素的内容往往不可能含有字符 x，于是替换元素的基线就被硬生生定义成 了元素的下边缘。

替换元素的尺寸计算

1. 固有尺寸指的是替换内容原本的尺寸（不加修饰的默认尺寸）
2. HTML 尺寸(通过html标签的原生width,height属性改变)
3. css尺寸

css尺寸>html尺寸>固有尺寸

可以利用css的content属性完成图片的资源替换(实现 hover 图片变成另外一张图片的效果)

2.2深入理解Padding

错误: 内联元素 的 padding 只会影响水平方向，不会影响垂直方向。
这种认知是不准确的，内联元素的 padding 在垂直方向同样会影响布局，影响视觉表现。 只是因为内联元素没有可视宽度和可视高度的说法(clientHeight 和 clientWidth 永远是 0)，垂直方向的行为表现完全受 line-height 和 vertical-align 的影响，视觉上并没有 改变和上一行下一行内容的间距，因此，给我们的感觉就会是垂直 padding 没有起作用

CSS 中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠效果的现象。比如，relative 元素的定位、盒阴影 box-shadow 以及 outline 等。这些层叠现象虽 然看似类似，但实际上是有区别的。其分为两类:一类是纯视觉层叠，不影响外部尺寸;另一 类则会影响外部尺寸。box-shadow 以及 outline 属于前者，而这里的 inline 元素的padding 层叠属于后者。区分的方式很简单，如果父容器 overflow:auto，层叠区域超出父 容器的时候，没有滚动条出现，则是纯视觉的;如果出现滚动条，则会影响尺寸、影响布局。

对于非替换元素的内联元素，不仅 padding 不会加入行盒高度的计算，margin
和 border 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染

padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的

内联元素的垂直 padding 会让“幽灵空白 节点”显现，也就是规范中的“strut”出现

2.3 深入理解margin

对于 padding，元素设定了 width 或者保持“包裹性”的时候，会改变元素可视尺寸;但是 对于 margin 则相反，元素设定了 width 值或者保持“包裹性”的时候，margin 对尺寸没有 影响，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。(只要元素的尺寸表现符合“充分利用可用空间”，无论是垂直方向还是水 平方向，都可以通过 margin 改变尺寸)

和 padding 属性一样，margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算 的

margin合并的特点:
(1)块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化
(2)只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流 是水平流，因此发生 margin 合并的就是垂直方向。

margin合并的典型场景:
(1)相邻兄弟元素 margin 合并。
(2)父级和第一个/最后一个子元素。
(3)空块级元素的 margin 合并。

如何阻止父级和第一个/最后一个子元素的margin合并
• 父元素设置为块状格式化上下文元素;
• 父元素设置 border-top 值;
• 父元素设置 padding-top 值;
• 父元素和第一个子元素之间添加内联元素进行分隔。

margin合并的计算规则
“正正取大值”“正负值相加”“负负最负值”

margin:auto 的填充规则如下。
(1)如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
(2)如果两侧均是 auto，则平分剩余空间。

为什么明明 容器定高、元素定高，margin:auto 却无法垂直居中?

原因在于触发 margin:auto 计算有一个前提条件，就是 width 或 height 为 auto 时， 元素是具有对应方向的自动填充特性的。

如何实现子元素的水平及垂直居中效果

绝对定位元素的 margin:auto 居中(即使父元素 height:auto 也是支持的)
通过给子元素同时赋予top,bottom,left,right属性，此时.son 这个元素的尺寸表现为“格式化宽度和格式化高度”，和<div>的“正常流宽度”一 样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸，然后再设置一个margin: auto

.father {
       width: 300px; height:150px;
       position: relative;
}
  .son {
      position: absolute;
       top: 0; right: 0; bottom: 0; left: 0;
       width: 200px; height: 100px;
       margin: auto;
}

margin无效的场景

1. display 计算值 inline 的非替换元素的垂直 margin 是无效的,对于内联替换元素， 垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。
2. 表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是无效的。
3. margin 合并的时候，更改 margin 值可能是没有效果的。
4. 绝对定位元素非定位方位的 margin 值“无效”。
5. 定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的 定位“失效”(原因: 若想使 用 margin 属性改变自身的位置，必须是和当前元素定位方向一样的 margin 属性才可以，否 则，margin 只能影响后面的元素或者父元素)
6. 内联特性导致的 margin 无效

2.4 深入理解border

border-style

默认值: none
可选值: solid, dotted,dashed, double,inset(内凹)、outset(外凸)、groove(沟槽)、ridge (山脊)

border-width的三个关键字: thin(1px), medium(3px), thick(4px)

border-color:

border-color 有一个很重要也很实用的特性，就是“border-color 默认颜色就是 color 色值”。

3 内联元素与流

line-height 行高的定义就是两基线的间距，vertical-align 的默认 值就是基线，其他中线顶线一类的定义也离不开基线

x-height 指的就是小写字母 x 的高度， 术语描述就是基线和等分线(mean line)(也称作中线，midline)之间的距离

vertical-align:middle。这里的 middle 是中间的意思。指的是基线往上1/2 x-height高度。我们可以近似理解为字 母 x 交叉点那个位置。由此可见，vertical-align:middle 并不是绝对的垂直居中对齐，我们平常看到的 middle 效果只是一种近似效果。原因很简单，因为不同的字体在行内盒子中的位置是不一样 的

对于非替换元素的纯内联元素，其可 视高度完全由 line-height 决定。注意这里的措辞— “完全”，什么 padding、border 属性对可视高度是没有任何影响的，这也是我们平常 口中的“盒模型”约定俗成说的是块级元素的原因。

一般业界 的共识是:行距 = 行高− em-box。转换成 CSS 语言就是:行距 = line-height - font-size。

内容区域高度受 font-family 和 font-size 双重影响，而 em-box 仅受 font-size 影响，通常内容区域高度要更高一些。除 了下面这种情况，也就是“当我们的字体是宋体的时候，内容区域和 em-box 是等同的

line-height 不会影响替换元素(如图片的高度)

内联替换元素和内联非替换元素在一起时的高度表现
由于同属内联元素，因此，会共同形成一个“行框盒子”，line-height 在这个混合元素 的“行框盒子”中扮演的角色是决定这个行盒的最小高度(即优先级不高)

行高可以实现“垂直居中”原因在于 CSS 中“行距的上下等分机制”，如果行距的添加规则是在文字的上方或者下方，则行高是无法让文字垂直 居中的。(其实并不严谨，因为字体可能会有下沉)

line-height的可选值

• 数值，如 line-height:1.5，其最终的计算值是和当前 font-size 相乘后的值。
例如，假设我们此时的 font-size 大小为 14px，则 line-height 计算值是
1.514px=21px。
• 百分比值，如 line-height:150%，其最终的计算值是和当前 font-size 相乘后
的值。例如，假设我们此时的 font-size 大小为 14px，则 line-height 计算值是
150%14px=21px。
• 长度值，也就是带单位的值，如 line-height:21px 或者 line-height:1.5em
等，此处 em 是一个相对于 font-size 的相对单位，因此，line-height:1.5em 最终的计算值也是和当前 font-size 相乘后的值。例如，假设我们此时的 font-size 大小为 14px，则 line-height 计算值是 1.5*14px=21px。

如果使用数值作为 line-height 的属性值， 那么所有的子元素继承的都是这个值;但是，如果使用百分比值或者长度值作为属性值，那么所有 的子元素继承的是最终的计算值

只要有“内联盒子”在，就 一定会有“行框盒子”，就是每一行内联元素外面包裹的一层 看不见的盒子。在每个“行框盒子”前面有一个宽度为 0 的具有该元素的字体和行高属性的看不见的“幽 灵空白节点”

verical-align的属性值:
抛开 inherit 这类全局属性值不谈，我把 vertical-align 属性值分为以下 4 类:
• 线类，如 baseline(默认值)、top、middle、bottom;
• 文本类，如 text-top、text-bottom;
• 上标下标类，如 sub、super;
• 数值百分比类，如 20px、2em、20%等。

vertical- align 属性的百分比值则是相对于 line-height 的计算值计算的

vertical-align 属性只能作用在 display 计算值为 inline、inline- block，inline-table 或 table-cell 的元素上

虽然就效果而言，table-cell 元素设置 vertical-align 垂 直对齐的是子元素，但是其作用的并不是子元素，而是 table-cell 元素自
身。就算 table-cell 元素的子元素是一个块级元素，也一样可以让其有各 种垂直对齐表现。

对字符 而言，font-size 越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当字 号大小不一样的两个文字在一起的时候，彼此就会发生上下位移，如果位移距离足够大，就会 超过行高的限制，而导致出现意料之外的高度

vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下 边缘，对于替换元素则是替换元素的下边缘。但是，如果是 inline-block 元素，则规则要 复杂了:一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible， 则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。

vertical-align属性值为top/bottom时:
• 内联元素:元素底部和当前行框盒子的顶部对齐。(注意是行框盒子)
• table-cell 元素:元素底 padding 边缘和表格行的顶部对齐。

vertical-align属性值为text-top/text-bottom
• vertical-align:text-top:盒子的顶部和父级内容区域的顶部对齐。
• vertical-align:text-bottom:盒子的底部和父级内容区域的底部对齐。

四. 流的破坏与保护

4.1 float

float的特性
• 包裹性;
• 块状化并格式化上下文; (float不为none则其display计算值为block)
• 破坏文档流;(父元素高度坍塌，行框盒子和浮动元素的不可重叠性)
• 没有任何 margin 合并;

行框盒子和浮动元素的不可重叠性

行框盒子如果和浮动元素的垂直高度有 重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠(注意，这里说的是“行框盒子”，也就是每行内联元素所在的那个盒子，而非外部的块状 盒子。实际上，由于浮动元素的塌陷，块状盒子是和浮动元素时完全重叠的)

clear属性
官方解释=>元素盒子的边不能和前面的浮动元素相邻
clear 属性只有块级元素才有效的
clear:both 的作用本质是让自己不和 float 元素在一行显示，并不是真正意义上 的清除浮动

4.2 BFC(块级格式化上下文)

如何触发BFC
• <html>根元素;
• float 的值不为 none;
• overflow 的值为 auto、scroll 或 hidden;
• display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;
• position 的值不为 relative 和 static。

任何 BFC 元素和 float 元素相遇的时候，都可以实现自动填充的自适应布局

4.3 overflow

overflow的常见属性
• visible:默认值。
• hidden:剪裁。
• scroll:滚动条区域一直在。
• auto:不足以滚动时没有滚动条，可以滚动时滚动条出现。

overflow为hidden时，当子元素内容超出容器宽度高度限制的时候，剪裁的边界是 border box 的内边缘，而非 padding box 的内边缘

除非 overflow-x 和 overflow-y 的属性值都是 visible，否则 (另一方设置的额)visible 会当成 auto 来解析，即永远不可能实现一个方向溢出剪裁或滚动，另一方向内容溢出显示的效果

滚动条的几个特性

1.滚动条会占用容器的可用宽度或高度

2. 在 PC 端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签

4.4 position: absolute

特性
1.position: absolute会覆盖float
2.产生BFC
3.具有包裹性(也就是尺寸收缩包裹)

position:absolute的height:100%和 height:inherit 的区别。对于普通元素，两者确实没 什么区别，但是对于绝对定位元素就不一样了。height:100%是第一个具有定位属性值的祖先 元素的高度，而 height:inherit 则是单纯的父元素的高度继承

position:absolute 计算和定位是相对于祖先定位元素的 padding box

包含块
包含块(containing block)这个概念实际上大家一直都有接触，就是元素用来计算和定位 的一个框。比方说，width:50%，也就是宽度一半，那到底是哪个“元素”宽度的一半呢?注 意，这里的这个“元素”实际上就是指的“包含块”。有经验的人应该都知道，普通元素的百分 比宽度是相对于父元素的 content box 宽度计算的，而绝对定位元素的宽度是相对于第一个 position 不为 static 的祖先元素计算的

具有相对特性的无依赖 absolute 绝对定位
一个绝对定位元素，没 有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在 哪里?(原位)

如果 overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则 overflow 无法对 absolute 元素进行剪裁

当且仅当对立方向同时发生定位的时候，position: absolute才会具有流体特性

4.4 position: relative

两大特性:
一是相对自身;
二是无侵入(relative 进行定位偏移的时候，一般情况下不会影响周围元素的布 局。)

相对定位元素的 left/top/right/bottom 的百分比值是相对于包含块计算的，而不是自身。注意，虽然定位位移是相对自身，但是百分 比值的计算值不是

4.5 position: fixed

position:fixed 固定定位元素的“包含块”是根元素，我们可以将其近似看成<html> 元素

亦具有无依赖定位的特性(参见absolute)

五. CSS 世界的层叠规则

z-index 属性只有和定位元素(position 不为 static 的元素)在一 起的时候才有作用，可以是正数也可以是负数

层叠顺序

层叠顺序