CSS布局
正常布局流
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式，页面元素会按顺序从上到下（块级元素）或从左到右（内联元素）排列。
- 出现在另一个元素下面的元素被描述为块元素，与出现在另一个元素旁边的内联元素不同，内联元素就像段落中的单个单词一样。
- 块级元素：会占据整行，并从新的一行开始显示。常见的块级元素有
<div>、<h1>到<h6>、<p>等。 - 内联元素：不会独占一行，它们按顺序排列在同一行内。常见的内联元素有
<span>、<a>、<img>等。
<div>This is a block element</div>
<span>This is an inline element</span>
<p>This is another block element</p>
display属性
在CSS中用于设置元素的显示类型，常用值有：block、inline、inline-block、flex、grid、none等。
block：块级元素，元素独占一行，宽度自动填满父容器（除非设置了宽度）。inline：内联元素，元素与其他元素排列在同一行中。inline-block：元素表现得像内联元素，但可以设置宽度和高度，类似块级元素。none：隐藏元素，元素不会显示在页面上。
弹性盒子
Flexbox 是一种一维布局模型（即横向或纵向布局），适合用于动态分配空间和对齐元素。通过设置父容器为display: flex，子元素可以灵活地伸缩，可以实现居中、对齐和分配空间。
主要属性：
display: flex：将父容器设置为弹性容器。justify-content：控制子元素在主轴（横向或纵向）上的对齐方式。align-items：控制子元素在交叉轴（垂直或水平方向）上的对齐方式。flex-direction：设置主轴的方向，可以是row（默认），column，row-reverse，column-reverse。flex-wrap：控制子元素是否换行。
应用场景
- 垂直居中均匀分布
.container {
display: flex;
justify-content: space-between; /* 均匀分布 */
align-items: center; /* 垂直居中 */
height: 100px;
}
网格
Grid布局是CSS的二维布局系统，允许创建复杂的网格结构，通过在父容器中定义行和列的布局方式实现。
主要属性：
display: grid：设置父容器为网格容器。grid-template-columns：定义网格的列宽。grid-template-rows：定义网格的行高。grid-gap：设置网格行列之间的间距。grid-column和grid-row：设置子元素所占的网格位置。
应用场景
- 响应式设计，适应不同屏幕尺寸
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建三列 */
grid-gap: 10px;
}
.grid-container .item1 {
grid-column: span 2; /* 占据两列 */
}
浮动
早期用于创建布局，可以让元素浮动到父容器的左侧或右侧，其他内容可以围绕浮动元素排列，例如可以将纵向导航栏变为横向排列。
常用属性：
float: left：元素浮动到左侧。float: right：元素浮动到右侧。clear：用于清除浮动影响。
定位
position属性使元素能够根据不同的定位方式进行精确布局，常用于弹窗、固定导航条等位置固定或偏移的布局。
常用属性：
position: relative：相对定位，相对于自身原位置偏移。position: absolute：绝对定位，相对于最近的已定位父元素进行定位。position: fixed：固定定位，元素相对于浏览器窗口固定。
.container {
position: relative;
height: 400px;
}
.fixed {
position: absolute;
top: 20px;
right: 20px;
background-color: #ff0;
padding: 10px;
}
表格布局
通过使用display: table等CSS属性创建行列布局。
主要属性：
display: table：模拟表格容器。display: table-row：模拟表格行。display: table-cell：模拟表格单元格。
多列布局
允许文本或其他元素在多个列中显示的布局方式。
主要属性：
column-count：定义列数。column-gap：设置列与列之间的间距。
