在设置元素布局时，应先区分 块级元素 和 行内元素：
块级元素：占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”，也就是说下一个元素会另起一行显示，相当于默认包含 display: block 属性
行内元素：只占据它对应标签的边框所包含的空间，也就是说只要宽度允许，所有内容都会在同一行显示
不同元素可能会造成布局不一样，以下内容均视情况选择合适的元素类型使用
更改子元素显示顺序
渲染网页时会根据 html 结构里面的顺序渲染元素，如果希望更改显示顺序，除了直接更改 html 结构之外，还可以通过 order 改变顺序
1.parent {
2 display: flex;
3 flex-flow: row wrap;
4}
5.son1 { order: 3; }
6.son2 { order: 1; }
7.son3 { order: 2; }
子元素左右分布
如果需要在最左和最右显示两个元素，只需要在父元素上设置：
1.parent {
2 display: flex;
3 justify-content: space-between;
4}
三个及以上元素的问题需要注意的是，元素之间的距离是相等的，这个距离是一个元素到另一个元素间的距离，而不是一个元素的中间到另一个元素的中间的距离
左边文本
中间文本
右边文本^中间点如果希望第三个子元素可以居中，不受其他元素宽度的影响，则此方法不适用，可以考虑用绝对定位的方式设置
左边文本
中间文本
右边文本^中间点1.parent {
2 position: relative;
3 display: flex;
4}
5.child-1 { position: absolute; left: 0; }
6.child-2 { margin: auto;}
7.child-3 { position: absolute; right: 0; }
图标与文字水平对齐
成功错误效果
成功正确效果当图标与文字放在一起时，由于显示定位的基线不同，导致对不齐，例如下面的 svg 图标就无法与文字对齐
1<div class="parent">
2 <span class="child">图标</span>
3 <span class="child">文本</span>
4</div>
可以考虑将子元素设置为 inline-block 属性，同时把图片和文字的高度都设为 1ex
1.child {
2 display: inline-block;
3 line-height: 1ex;
4 vertical-align: middle;
5}
什么是 ex？ex 即 x-height, 是字母 x 的高度。
CSS 中的属性值一般以 baseline 为基准，而 baseline 会随字体而变化，典型的例子就是微软雅黑由于字符整体下沉，所以 baseline 也降低了，如果图标设置 vertical-align: middle 就会以 baseline 为基准对齐，导致图标随字符基线的下沉而下沉，也就无法对齐了。
而 ex 则是以字母 x 的为基准，如果把图标高度设为 1ex，则可以理解为图标与字母 x 高度相同，也就是与 x 垂直对齐，由于字母 x 是与其他文字对齐的，此时无论使用什么字体，图标也可以与其他文字对齐
ex 是全平台兼容的，甚至连 1997 年发布的 IE4 都兼容，所以可以放心使用
需要特别说明的是，如果图标的高度超过了 1ex，则需要额外添加 vertical-align: middle 才能实现对齐
最后更新于 2022 年 04 月 22 日系列文章
CSS 使用技巧：背景颜色篇
2022 年 04 月 22 日CSS 使用技巧：元素布局篇 (当前)
2022 年 04 月 22 日CSS 使用技巧：文字处理篇
2022 年 08 月 16 日
CSS疑难杂症
2023 年 04 月 18 日
需要注意的是，元素之间的距离是相等的，这个距离是一个元素到另一个元素间的距离，而不是一个元素的中间到另一个元素的中间的距离
如果希望第三个子元素可以居中，不受其他元素宽度的影响，则此方法不适用，可以考虑用绝对定位的方式设置
1.parent {
2 position: relative;
3 display: flex;
4}
5.child-1 { position: absolute; left: 0; }
6.child-2 { margin: auto;}
7.child-3 { position: absolute; right: 0; }
图标与文字水平对齐
当图标与文字放在一起时，由于显示定位的基线不同，导致对不齐，例如下面的 svg 图标就无法与文字对齐
1<div class="parent">
2 <span class="child">图标</span>
3 <span class="child">文本</span>
4</div>
可以考虑将子元素设置为 inline-block 属性，同时把图片和文字的高度都设为 1ex
1.child {
2 display: inline-block;
3 line-height: 1ex;
4 vertical-align: middle;
5}
什么是 ex？ex 即 x-height, 是字母 x 的高度。
CSS 中的属性值一般以 baseline 为基准，而 baseline 会随字体而变化，典型的例子就是微软雅黑由于字符整体下沉，所以 baseline 也降低了，如果图标设置 vertical-align: middle 就会以 baseline 为基准对齐，导致图标随字符基线的下沉而下沉，也就无法对齐了。
而 ex 则是以字母 x 的为基准，如果把图标高度设为 1ex，则可以理解为图标与字母 x 高度相同，也就是与 x 垂直对齐，由于字母 x 是与其他文字对齐的，此时无论使用什么字体，图标也可以与其他文字对齐
ex 是全平台兼容的，甚至连 1997 年发布的 IE4 都兼容，所以可以放心使用
需要特别说明的是，如果图标的高度超过了 1ex，则需要额外添加 vertical-align: middle 才能实现对齐
最后更新于 2022 年 04 月 22 日系列文章
CSS 使用技巧：背景颜色篇
2022 年 04 月 22 日CSS 使用技巧：元素布局篇 (当前)
2022 年 04 月 22 日CSS 使用技巧：文字处理篇
2022 年 08 月 16 日
CSS疑难杂症
2023 年 04 月 18 日
ex 即 x-height, 是字母 x 的高度。
CSS 中的属性值一般以 baseline 为基准，而 baseline 会随字体而变化，典型的例子就是微软雅黑由于字符整体下沉，所以 baseline 也降低了，如果图标设置 vertical-align: middle 就会以 baseline 为基准对齐，导致图标随字符基线的下沉而下沉，也就无法对齐了。
而 ex 则是以字母 x 的为基准，如果把图标高度设为 1ex，则可以理解为图标与字母 x 高度相同，也就是与 x 垂直对齐，由于字母 x 是与其他文字对齐的，此时无论使用什么字体，图标也可以与其他文字对齐
ex 是全平台兼容的，甚至连 1997 年发布的 IE4 都兼容，所以可以放心使用
需要特别说明的是，如果图标的高度超过了 1ex，则需要额外添加 vertical-align: middle 才能实现对齐