持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
1、弹性布局
优点：自动计算，自适应；弹性布局可自动计算宽度、间距等，使多个元素始终保持最初设计的样子。
2、居中的方法
前提：父元素必须是块级盒子容器；父元素宽度必须已经被设定好。
不可自由嵌套的元素：就是里面只能放内联元素的，包括
- 标题标记：h1、h2、h3、h4、h5、h6、caption
- 段落标记：p
- 分割线：hr
- 一个特别的元素
<dt>，它只存在于列表元素<dl>的子一级 - 例如：p元素里不可嵌套 h，解析出来会是 p标签、h标签、p标签 三个，而且是平级关系
场景1：
父元素是块级元素，子元素也是块级元素，但宽度没有设定。
不用考虑，因为子元素会占满整行。
场景2：
子元素是行内元素，子元素宽度是由其内容撑开的。
这种情况下解决方案是给父元素设定：text-align: center;
场景3：
子元素是块级元素且宽度已经设定。
**方案一：**给子元素添加 margin: 0 auto;
方案二：父元素相对定位，子元素绝对定位
- 子元素：
left: 50%; - 子元素：
margin-left: 子元素宽一半;或者transform: translateX(-50%);
方案三：display: flex; flex-direction: row; justify-content: center;
3、垂直居中
前提：父元素是盒子容器
场景1：
子元素是行内元素，高度是由其内容撑开的。
单行：设定其父元素的 line-height 为其高度使得子元素垂直居中。
多行：通过给父元素设定 display: inline / inline-blick / table-cell; vertical-align: middle; 来解决。
注意：vertical-align 一般情况下，table-cell 这种行内元素才可以用
场景2：
子元素是块级元素，但子元素高度没有设定
方案一：通过给父元素设定 display: inline / inline-blick / table-cell; vertical-align: middle; 来解决。
方案二：flexbox。父元素：display: flex; flex-direction: column; justify-content: center;
4、移动端适配问题
简述 rpx、px、em、rem、%、vh、vw的区别
pt：设备物理像素
屏幕宽 / 分辨率，其中每一小份就是 1 pt
px：css像素
pc机大屏幕显示器：1px约等于0.76分物理像素
手机小屏幕：以 iPhone6 为标准，物理像素750，分辨率 375。1px = 2pt
所以，px也是一个相对单位
手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够等比缩放。
rem
以网页根元素 <html> 元素上设置的默认字体大小为 1rem。默认 1rem = 16px；
好处：
- 可以实现响应式布局
- 响应式布局指的是元素大小能根据屏幕大小随时变化
- 因为，所有以 rem 为单位的位置、大小都跟着根元素字体大小而变化
- 所以只要在屏幕大小变化的时候改变根元素 font-size 就行了。
em
父元素的字体大小为 1em：用的不多
