三个 div 盒子在一一行显示，但是 div 标签默认是独占一行的
想要实现块级盒子在一行，两种方法，浮动和 Flex 布局
浮动之后的盒子：顶对齐，行内块显示特点（宽高显示）
浮动的盒子会脱标，不占用标准流位置（所以一个父级里边的盒子要么全浮动，要么不浮动）
浮动-产品区域布局
一个大盒子分为左右两个盒子left 和 right，分别左右浮动，右盒子 中有八个 li 标签
li 中皆有右外边距 ，下外边距，li 本来独占一行排列，那么要实现效果则左浮动，且最右边无右外边距
清除浮动
Flex 布局
浮动
Flex布局：更灵活，自动规划好页面规整，父级没设置高度，也不会出现脱标情况
Flex组成
主轴对齐方式
侧轴对齐方式
修改主轴方向
弹性伸缩比
现在默认水平方向是主轴，父级块中包含三个子级块（模式转换让三个子级块并列），给第一个 子级块设置了宽度，然后给第二个子级块设置 1 份，给第三个子级块设置 2 份。那么也就是父级块所有宽度减去第一个子级块宽度，然后平分为 3 份，一个宽度占一份，一个宽度占两份。
也可以将主轴方向改为竖直方向
弹性盒子换行
行对齐方式
抖音解决方案案例
清除默认样式
像素大厨中将大盒子宽高以及描边颜色测量出来
标签解构：如果想要 li 标签中内容是有顺序的数字，则 ul > li {$} *4 。如果是内容，那么家伙加上 [ ]
测量每个 li 标签上右下左
浮动，换行，主轴对齐方式，行对齐方式
每个 li 标签中图片和内容的 div 标签都要在一行显示，所以给 父级标签 li 加上 display:flex;浮动
类 text 框中 只用将 h4 行高固定即可，下边的 p 中内容则不会粘贴 h4 中的内容
