常用的布局方式
- 块级元素布局：块级元素会独占一行，从上到下排列。常见的块级元素有
<div>,<p>,<h1>等。 - 行内元素布局：行内元素不会独占一行，会从左到右依次排列。常见的行内元素有
<span>,<a>,<img>等。 - 浮动（float）布局：浮动布局允许元素浮动在页面的左侧或右侧，其他内容会环绕在浮动元素周围。这种布局常用于实现多栏效果。
- 定位（position）布局：包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky），可以将元素定位到页面的特定位置。
- 弹性盒子（flexbox）布局：这是一种现代的布局方式，用于在容器内对子元素进行灵活的排列和对齐。可以方便地实现响应式布局。
- 网格（grid）布局：这也是一种现代的布局方式，用于创建复杂的二维布局。它允许在容器内定义行和列，并将子元素放置在网格中。
- 表格（table）布局：表格布局用于将数据以表格的形式展示，包括行、列和单元格等组成部分。
- 多列（column）布局：这种布局允许将文本内容分成多个并排的列，类似于报纸和杂志的排版效果。
这些布局方式可以单独使用，也可以混合使用以实现更复杂的布局效果。现代网页开发中，推荐使用弹性盒子和网格布局来构建响应式和灵活的页面布局。
Flexbox 布局
flex-direction 属性
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目
row 值水平堆叠 flex 项目（从左到右）
column 值设置垂直堆叠 flex 项目（从上到下）
flex-wrap 属性
flex-wrap 属性规定是否应该对 flex 项目换行
wrap 值规定 flex 项目将在必要时进行换行
nowrap 值规定将不对 flex 项目换行（默认）
flex-flow 属性
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
justify-content 属性–水平对齐
justify-content 属性用于水平对齐 flex 项目
center 值将 flex 项目在容器的中心对齐
flex-start 值将 flex 项目在容器的开头对齐（默认）
flex-end 值将 flex 项目在容器的末端对齐
space-around 值显示行之前、之间和之后带有空格的 flex 项目
space-between 值显示行之间有空格的 flex 项目
align-items 属性–垂直对齐
align-items 属性用于垂直对齐 flex 项目
center 值将 flex 项目在容器中间对齐
flex-start 值将 flex 项目在容器顶部对齐
flex-end 值将弹性项目在容器底部对齐
stretch 值拉伸 flex 项目以填充容器（默认）
baseline 值使 flex 项目基线对齐
align-content 属性–多行对齐
align-content 属性用于对齐弹性线
space-between 值显示的弹性线之间有相等的间距
space-around 值显示弹性线在其之前、之间和之后带有空格
stretch 值拉伸弹性线以占据剩余空间（默认）
center 值在容器中间显示弹性线
flex-start 值在容器开头显示弹性线
flex-end 值在容器的末尾显示弹性线
flex-grow 属性
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少，也就是说项目按比例分配
flex-basis 属性
flex-basis 属性规定 flex 项目的初始长度
flex-shrink 属性
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少
flex 属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
align-self 属性
align-self 属性规定弹性容器内所选项目的对齐方式
align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式