width：auto
auto默认值包含四种表现形式：
- 充分利用可用空间：fill-available
- 收缩与包裹: fit-content
- 收缩到最小：min-content
- 超出容器限制
height：100%
如果父元素高度为auto，只要子元素在文档流中，百分比值会被忽略。
使height：100%生效：
- 设置显示的高度值
html,body {
height: 100%;
}
- 使用绝对定位
div {
position: absolute;
height: 100%;
}
外部尺寸与流体特性
- 正常流宽度：margin/border/padding/content内容区域自动分配水平空间
- 格式化宽度：仅出现在“绝对定位模型”中
内部尺寸与流体特性
- 包裹性：包裹+自适应
- 首选最小宽度：每个汉字宽度，每个英文字符单元
- 最大宽度：最大的连续内联盒子的宽度
内联元素
可以和文字在同一行显示
内联盒模型
- 内容区域
- 内联盒子
- 行框盒子
- 包含盒子
幽灵空白节点
在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”。这个空白节点永远透明，不占宽度，无法获取，但确实存在，表现如文本节点一样。
替换元素
根据是否具有可替换内容，可以把元素分为替换元素和非替换元素。
典型的替换元素：<img>、<object>、<video>、<iframe>、<textarea>、<input>······
替换元素特性：
- 内容可替换
- 内容的外观不受页面上的css影响
- 有自己的尺寸
- 在很多css属性上有自己的一套规则
替换元素和非替换元素的区别：
- 替换元素和非替换元素之间只隔了一个src属性
- 替换元素和非替换元素之间只隔了一个CSS
content属性
content内容生成技术
- content辅助元素生成
- content字符内容生成
- content图片生成
- content开启闭合符号生成
- content计数器
margin
margin合并的3种场景
- 相邻兄弟元素margin合并
- 父级和第一个/最后一个子元素
- 空块级元素的margin合并
margin合并的计算规则：
- 正正取大
- 正负相加
- 负负最负
margin：auto的填充规则
- 如果一侧定值，一侧auto，则auto为剩余空间大小
可用于实现左对齐或右对齐 - 如果两侧均是auto，则平分剩余空间
注：触发margin：auto计算有一个前提，width和height不能是auto
margin无效情形：
-
display计算值inline的非替换元素的垂直margin无效 - 表格中
<tr>和<td>元素设置display计算值是table-cell和table-row的元素的margin都是无效的 - margin合并的时候
- 绝对定位元素非定位方向的margin值“无效”
- 定高容器的子元素的
margin-bottom或者定宽容器的子元素的margin-right的定位“失效” - 鞭长莫及导致的margin失效
- 内联特性导致的margin失效
vertical-align
vertical-align属性值分为4类：
- 线类：
baseline,top,middle,bottom - 文本类：
text-top,text-bottom - 上下标类：
sub,super - 数值百分比类： 如
20px,2em,20%
vertical-align作用的前提： 只能应用于内联元素以及display值为table-cell的元素
层叠上下文和层叠水平
层叠顺序：
- 正
z-index -
z-index：0或者z-index:auto或者不依赖z-index的层叠上下文 -
inline水平盒子 -
float浮动盒子 -
block块状盒子 - 负
z-index - 层叠上下文
background/boder
层叠领域的黄金准则
- 谁大谁上
- 后来居上
z-index不犯二准则： 对于非浮层元素，避免设定z-index值，z-index值没有任何道理需要超过2。
流向的改变
directionunicode-bidiwriting-mode
