flex布局与定位

弹性布局的一般常见的简单布局

水平居中布局

容器的display属性设置为flex，然后使用justify-content和align-items属性，将子元素水平和垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

网格布局

网格布局是指在容器中使用多个弹性盒子，可以类似于栅格布局一样进行排列，方便地实现复杂布局。

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 1 0 25%;
}

两栏布局

左侧栏固定宽度，右侧栏自适应剩余空间，并且两栏同时可以自适应高度。

.container {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
}

悬挂式布局

顶部固定导航栏，中间内容自适应，底部固定工具栏。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  height: 50px;
}
.main {
  flex: 1;
}
.footer {
  height: 50px;
}

弹性布局的常用属性

flex-direction

这个属性用来指定弹性容器中的主轴方向，有以下四个取值：

row：默认值，主轴为水平方向。

row-reverse：与row相同，但是轴线反向。

column：主轴为垂直方向。

column-reverse：与column相同，但是轴线反向。

justify-content

这个属性用来指定弹性容器中的主轴对齐方式，有以下五个取值：

flex-start：默认值，主轴起点对齐。flex-end：主轴终点对齐。center：主轴居中对齐。

space-between：两端对齐，项目之间的间隔相等。

space-around：每个项目两侧的间隔相等。

align-items

这个属性用来指定弹性容器中的交叉轴对齐方式，有以下五个取值：

stretch：默认值，交叉轴被拉伸到与容器相同的高度或宽度。

flex-start：交叉轴起点对齐。

flex-end：交叉轴终点对齐。

center：交叉轴居中对齐。

baseline：项目的第一行文字的基线对齐。

flex-wrap

这个属性用来指定弹性容器是否换行，有以下三个取值：

nowrap：默认值，不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

align-content

这个属性用来指定弹性容器中多根轴线的对齐方式，有以下五个取值：

stretch：默认值，轴线被拉伸到与容器相同的高度或宽度。

flex-start：多根轴线在顶部对齐。

flex-end：多根轴线在底部对齐。

center：多根轴线在中间对齐。

space-between：轴线之间的间隔相等。

space-around：每根轴线两侧的间隔相等。

在HTML中，可以使用CSS的定位（position）属性来设置元素的位置。

常见的定位有：

静态定位（static）：元素默认的定位方式，不会受到top、right、bottom、left属性的影响；

相对定位（relative）：相对于元素原来的位置进行定位，可以通过top、right、bottom、left属性来设置偏移量；

绝对定位（absolute）：相对于最近的已定位祖先元素（position属性不为static的祖先元素），如果没有已定位祖先元素，则相对于body元素进行定位。绝对定位也可以通过top、right、bottom、left属性来设置偏移量；

固定定位（fixed）：相对于浏览器窗口进行定位，不会随着页面滚动而改变位置。固定定位也可以通过top、right、bottom、left属性来设置偏移量。

粘性布局（sticky layout）是指在滚动到某个位置时，元素的定位方式从相对定位（relative）变成固定定位（fixed），然后在滚动到另一个位置时再变回相对定位。这种布局方式可以为网页提供更加灵活的交互效果，常用于页面导航或标题栏等元素。