读《CSS世界》总结

width：auto

auto默认值包含四种表现形式：

1. 充分利用可用空间：fill-available
2. 收缩与包裹: fit-content
3. 收缩到最小：min-content
4. 超出容器限制

height：100%

如果父元素高度为auto，只要子元素在文档流中，百分比值会被忽略。
使height：100%生效：

1. 设置显示的高度值

html,body {
  height: 100%;
}

2. 使用绝对定位

div {
  position: absolute;
  height: 100%;
}

外部尺寸与流体特性

1. 正常流宽度：margin/border/padding/content内容区域自动分配水平空间
2. 格式化宽度：仅出现在“绝对定位模型”中

内部尺寸与流体特性

1. 包裹性：包裹+自适应
2. 首选最小宽度：每个汉字宽度，每个英文字符单元
3. 最大宽度：最大的连续内联盒子的宽度

内联元素

可以和文字在同一行显示

内联盒模型

1. 内容区域
2. 内联盒子
3. 行框盒子
4. 包含盒子

幽灵空白节点

在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”。这个空白节点永远透明，不占宽度，无法获取，但确实存在，表现如文本节点一样。

替换元素

根据是否具有可替换内容，可以把元素分为替换元素和非替换元素。
典型的替换元素：<img>、<object>、<video>、<iframe>、<textarea>、<input>······
替换元素特性：

1. 内容可替换
2. 内容的外观不受页面上的css影响
3. 有自己的尺寸
4. 在很多css属性上有自己的一套规则

替换元素和非替换元素的区别：

1. 替换元素和非替换元素之间只隔了一个src属性
2. 替换元素和非替换元素之间只隔了一个CSS content属性

content内容生成技术

1. content辅助元素生成
2. content字符内容生成
3. content图片生成
4. content开启闭合符号生成
5. content计数器

margin

margin合并的3种场景

1. 相邻兄弟元素margin合并
2. 父级和第一个/最后一个子元素
3. 空块级元素的margin合并

margin合并的计算规则：

1. 正正取大
2. 正负相加
3. 负负最负

margin：auto的填充规则

1. 如果一侧定值，一侧auto，则auto为剩余空间大小
   可用于实现左对齐或右对齐
2. 如果两侧均是auto，则平分剩余空间

注：触发margin：auto计算有一个前提，width和height不能是auto

margin无效情形：

1. display计算值inline的非替换元素的垂直margin无效
2. 表格中<tr>和<td>元素设置display计算值是table-cell和table-row的元素的margin都是无效的
3. margin合并的时候
4. 绝对定位元素非定位方向的margin值“无效”
5. 定高容器的子元素的margin-bottom或者定宽容器的子元素的margin-right的定位“失效”
6. 鞭长莫及导致的margin失效
7. 内联特性导致的margin失效

vertical-align

vertical-align属性值分为4类：

1. 线类： baseline,top,middle,bottom
2. 文本类： text-top,text-bottom
3. 上下标类： sub,super
4. 数值百分比类： 如20px,2em,20%

vertical-align作用的前提： 只能应用于内联元素以及display值为table-cell的元素

层叠上下文和层叠水平

层叠顺序：

1. 正z-index
2. z-index：0或者z-index:auto或者不依赖z-index的层叠上下文
3. inline水平盒子
4. float浮动盒子
5. block块状盒子
6. 负z-index
7. 层叠上下文background/boder

层叠领域的黄金准则

1. 谁大谁上
2. 后来居上

z-index不犯二准则： 对于非浮层元素，避免设定z-index值，z-index值没有任何道理需要超过2。

流向的改变

1. direction
2. unicode-bidi
3. writing-mode