CSS 布局

CSS 布局技巧，有多种方法可以实现不同的布局需求。以下是一些常见的布局技巧及其应用场景和实践：

1. 浮动（Float）布局：

   • 应用场景：通常用于创建多列布局，如将多个元素浮动到一行中。
   • 实操实践：使用 float: left 或 float: right 对元素进行浮动，然后使用 clear 属性来清除浮动。

   <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   
   //css
   .box { width: 200px;
         height: 200px; 
         float: left; 
         margin-right: 10px; } 
   .container { overflow: hidden; }
   
   

2. 定位（Positioning）布局：

   • 应用场景：用于创建绝对或相对于其他元素定位的布局。
   • 实操实践：使用 position: absolute 或 position: relative 来定位元素，结合 top、left、right、bottom 属性进行位置调整。

   <div class="container">
       <div class="header"></div>
       <div class="content"></div>
       <div class="sidebar"></div>
       <div class="footer"></div>
   </div>
   
   //CSS:
   .container {
   position: relative;
   }
   
   .header, .footer {
       position: absolute;
       width: 100%;
       height: 50px;
       background-color: #ccc;
   }
   
   .content {
       margin-top: 50px;
       margin-bottom: 50px;
   }
   
   .sidebar {
       position: absolute;
       top: 50px;
       right: 0;
       width: 200px;
       height: calc(100% - 100px);
       background-color: #f2f2f2;
   }
   
   

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

   • 应用场景：适用于在一个容器中创建灵活的、响应式的布局，使其适应不同尺寸的屏幕或设备。
   • 实操实践：在容器上设置 display: flex，然后使用 flex-grow、flex-shrink 和 flex-basis 来管理子元素的伸缩和固定大小。

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
   
    //CSS:
    .container {
        display: flex;
        justify-content: space-between;
    }
   
    .item {
        flex-basis: 30%;
        height: 200px;
        background-color: #ccc;
    }
   
   

4. 网格（Grid）布局：

   • 应用场景：适用于创建复杂的网格布局，以及在网格中对元素进行定位和对齐。
   • 实操实践：在容器上设置 display: grid，然后使用 grid-template-rows、grid-template-columns、grid-gap 和 grid-area 等属性来定义网格布局。

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

5. 自适应布局：

   • 应用场景：用于创建可针对不同屏幕尺寸和设备适应的布局。
   • 实操实践：使用百分比或相对单位来设置元素的宽度和高度，以及使用媒体查询来针对不同的屏幕尺寸应用不同的样式。

6. 多列布局：

   • 应用场景：用于创建多列网格布局，以便在一个容器中显示多个内容区域。
   • 实操实践：可以使用 CSS 的浮动、网格或弹性盒子布局来实现多列布局。

7. 响应式布局：

   • 应用场景：用于创建在不同设备上都具有良好显示效果的布局。
   • 实操实践：使用媒体查询来根据不同的屏幕宽度应用不同的样式和布局。