CSS用了这么多年，每次调个位置都靠试。
今天终于受不了了整理一下，发现细节还真挺多的，希望以后可以不用猜了。
文档流
- 块级元素
.child {
position: normal;
display: block;
width: 设置值 > 默认100%;
height: 设置值 > 内部撑开 > 默认0;
margin: 有，垂直margin会引发边距重叠;
top-left: 无;
}
- 行内元素
行高line-height：
每个字体在不同浏览器下都有默认行高，等于该字体的占位高度。
手动设置的行高不影响该高度，只影响基线距离。
不推荐设置1.5em行高，因为继承会继承计算px值；设置1.5行高会继承倍数
.child {
position: normal;
display: inline;
width: 内容宽度;
height: 永远等于默认line-height;
margin: 垂直无，水平有;
top-left: 无;
}
- 行内块元素
幽灵空白节点：
行内元素前永远会有一个空白节点，提供行内基线，
故行内块撑开，父元素往往会等于行内块高度 + 基线高度而非行内块高度，
解决办法是使用vertical-align: middle
.parent {
height: 设置值 > 内部撑开 + 基线高度
}
.child {
position: normal;
display: inline-block;
width: 设置值 > 内部撑开 > 默认0;
height: 设置值 > 内部撑开 > 默认0;
margin: 有，但是没有边距重叠;
top-left: 无;
}
相对定位
表现与文档流基本一致，除可以设置偏移位置
.child {
position: relative;
top-left: 相对原位置的偏移，不会占据文档流;
}
绝对定位
*块级元素
absolute元素不会撑开父元素
经典定位方法子绝父相
.child {
position: absolute;
display: block;
width: 设置值 > 内部撑开 > 默认0;
height: 设置值 > 内部撑开 > 默认0;
margin: 有，但是没有边距重叠;
top-left: 相对最近的相对定位元素;
}
- 行内元素，行内块
会变成块级元素，与块级元素表现一致
flex
父子元素都没有块级元素、行内元素的区分，称作容器以及容器成员
.parent {
display: flex;
width: 与元素本身position表现保持一致;
height: 与元素本身position表现保持一致;
}
.child {
width: 内部撑开 > flex-shrink > flex-grow > flex-basis > width *1;
height: 设置值 > 默认100% - margin-top;
margin: 有，但是没有边距重叠;
top-left: 无;
}
- *1.在宽度不足时，会触发flex-shrink缩小宽度，但子元素被内容撑开的部分不会被shrink;
在宽度足够时，会触发flex-grow增加宽度。
这两种情况不会同时触发。
但神奇的是width可以控制内部撑开的宽度，内部撑开却不受flex控制。 - 子元素绝对定位，不受flex控制；
相对定位，可以设置left/top
