CSS浮动、定位、弹性盒子布局 | 青训营笔记

1. 浮动(float)布局：

   • 应用场景：浮动布局适用于创建多列布局，特别是在需要实现响应式设计时非常有用。
   • 实操实践：

   <div class="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
   </div>
   

   .box {
     float: left;
     width: 33.33%;
   }
   

   容器是一个具有class=container的div元素，其中包含了三个具有class=box的子元素。每个子元素通过设置宽度为33.33%来占据父容器宽度的1/3，使用float属性将子元素浮动到左侧，使它们在同一行内水平排列。由于每个子元素占据了父容器宽度的1/3，所以它们会均匀地分布在父容器的横向空间上。

2. 定位(position)布局：

   • 应用场景：定位布局适用于需要精确定位元素的情况，例如创建居中或者叠加效果的布局。
   • 实操实践：

   <div class="container">
     <div class="box"></div>
   </div>
   

   .box {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   

   通过将子元素的position属性设置为absolute，可以使其脱离文档流，并且根据top和left属性的值对其进行精确的定位。在这个例子中，子元素被居中定位，top和left的值都设为50%，然后使用transform属性和translate函数将子元素在水平和垂直方向上向左上方移动自身宽度和高度的一半，从而实现居中效果。

3. 弹性盒子(flexbox)布局：

   • 应用场景：弹性盒子布局适用于创建灵活且自适应的布局，特别适合在容器内部对项目进行对齐和分布。
   • 实操实践：

   <div class="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
   </div>
   

   .container {
     display: flex;
   }
   
   .box {
     flex: 1;
   }
   

   容器是一个具有class=container的div元素，其中包含了三个具有class=box的子元素，通过将容器的display属性设置为flex，可以将其设置为弹性容器，子元素会自动水平排列在容器内部，子元素的flex属性被设置为1，它们会均匀地占据父容器的可用空间。

这些CSS布局技巧都有各自的应用场景和优缺点，需要根据具体的需求和设计目标，选择合适的布局方式是很重要的。