定位与弹性盒子布局 | 青训营

在进行网页布局时，CSS提供了多种布局技巧和方法，其中定位和弹性盒子布局是常用且强大的两种方式。

1. 定位(Positioning)：

   • 使用position: relative来创建相对定位的元素，通过top、right、bottom、left来调整元素的位置。
   • 使用position: absolute来创建绝对定位的元素，可以通过指定top、right、bottom、left来相对于最近定位父元素进行定位。
   • 使用position: fixed来创建固定定位的元素，可以将元素固定在浏览器视口中的某个位置。
   • 使用z-index来控制定位元素在堆叠顺序中的显示顺序。

2. 弹性盒子布局(Flexbox Layout)：

   • 使用display: flex来创建弹性容器，使得其内部元素成为弹性盒子。
   • 使用flex-direction来指定弹性盒子的主轴方向，可以是水平方向(row或row-reverse)或垂直方向(column或column-reverse)。
   • 使用flex-wrap来控制弹性盒子的换行行为。
   • 使用justify-content来定义弹性盒子内元素在主轴方向上的对齐方式。
   • 使用align-items来定义弹性盒子内元素在交叉轴方向上的对齐方式。
   • 使用flex-grow、flex-shrink和flex-basis来调整弹性盒子内元素的伸缩比例和基准值。
   • 使用align-self来覆盖弹性盒子容器的align-items属性，定义某个具体弹性盒子元素在交叉轴方向上的对齐方式。