CSS布局技巧

1. 浮动布局（float）：

   • 应用场景：多列布局、图文混排、导航栏等
   • 实操实践：

     <style>
       .container {
         width: 100%;
       }
       .left {
         float: left;
         width: 30%;
       }
       .right {
         float: right;
         width: 70%;
       }
     </style>
     <div class="container">
       <div class="left">左侧内容</div>
       <div class="right">右侧内容</div>
     </div>
     

2. 定位布局（position）：

   • 应用场景：绝对定位、固定定位、居中布局等
   • 实操实践：

     <style>
       .container {
         position: relative;
         width: 300px;
         height: 200px;
       }
       .absolute {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
       }
     </style>
     <div class="container">
       <div class="absolute">居中内容</div>
     </div>
     

3. 弹性盒子布局（flexbox）：

   • 应用场景：自适应布局、等分布局、垂直居中等
   • 实操实践：

     <style>
       .container {
         display: flex;
         justify-content: space-between;
       }
       .box {
         flex: 1;
       }
     </style>
     <div class="container">
       <div class="box">盒子1</div>
       <div class="box">盒子2</div>
       <div class="box">盒子3</div>
     </div>
     

4. 网格布局（grid）：

   • 应用场景：复杂布局、网格化布局等
   • 实操实践：

     <style>
       .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-gap: 10px;
       }
       .item {
         background-color: #ccc;
         height: 100px;
       }
     </style>
     <div class="container">
       <div class="item">项目1</div>
       <div class="item">项目2</div>
       <div class="item">项目3</div>
     </div>
     

5. 多列布局（column）：

   • 应用场景：报纸、杂志等多列排版
   • 实操实践：

     <style>
       .container {
         columns: 3;
         column-gap: 20px;
       }
       .item {
         break-inside: avoid;
         background-color: #ccc;
         margin-bottom: 20px;
       }
     </style>
     <div class="container">
       <div class="item">文章1</div>
       <div class="item">文章2</div>
       <div class="item">文章3</div>
     </div>
     

这些布局技巧都是常用的CSS布局方式，通过学习和实践它们，可以更灵活地进行页面布局和设计。根据具体的需求和场景选择合适的布局方式，可以提高开发效率和用户体验。