CSS 两栏布局和三栏布局的实现

青旅半醒 2023-10-14 20:39 18阅读 0赞

#### 文章目录 ####

*   *  一、两栏布局的实现
     *   *  1. float+margin
         *  2. flaot+BFC
         *  3. 定位+margin
         *  4. flex 布局
         *  5. grid布局
     *  二、三栏布局的实现
     *   *  1. float + margin
         *  2. float + BFC
         *  3. 定位 + margin(或者定位+BFC)
         *  4. flex布局
         *  5. 圣杯布局
         *  6. 双飞翼布局

### 一、两栏布局的实现 ###

两栏布局其实就是左侧定宽，右侧自适应的布局

#### 1. float+margin ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .container {
        
            display: flex;
            height: 300px;
          }
          .left {
        
            width: 100px;
            background: red;
          }
          .right {
        
            flex: 1;
            background: green;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </body>
    </html>

#### 2. flaot+BFC ####

> 知识课堂  
> 先来看两个相关的概念:  
> ●Box: Box是CSS布局的对象和基本单位，一个页面是由很多个Box组成的，这个Box就是我们所说的盒模型。  
> ●Formatting context: 块级上下文格式化，它是页面中的一块渲染区域，并且有一 套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

> 块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

> 通俗来讲: BFC是一 -个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

> **创建BFC的条件:**  
> ●根元素: body;  
> ●元素设置浮动: float除none以外的值;  
> ●元素设置绝对定位: position (absolute、 fixed);  
> ●display值为: inline-block、 table-cell、 table-caption、 flex等 ;  
> ●overflow值为: hidden、 auto、 scroll;

> **BFC的特点:**  
> ●垂直方向上，自.上而下排列，和文档流的排列方式-致。  
> ●在BFC中上下相邻的两个容器的margin会重叠  
> ●计算BFC的高度时，需要计算浮动元素的高度  
> ●BFC区域不会与浮动的容器发生重叠  
> ●BFC是独立的容器，容器内部元素不会影响外部元素●每个元素的左margin值和容器的左border相接触

#### 3. 定位+margin ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <style>
                * {
        
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                }
                .left {
        
                    position: absolute;
                    left: 0;
                    width: 100px;
                    height: 300px;
                    background: red;
                }
                .right {
        
                    margin-left: 100px;
                    height: 300px;
                    background: green;
                }
            </style>
        </head>
        <body>
            <div class="left"></div>
            <div class="right"></div>
        </body>
    </html>

#### 4. flex 布局 ####

#### 5. grid布局 ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <style>
                .container {
        
                    display: grid;
                    grid-template-columns: 100px 1fr;
                    box-sizing: border-box;
                    height: 300px;
                }
                .left {
        
                    background: red;
                }
                .right {
        
                    background: green;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>

### 二、三栏布局的实现 ###

左右定宽，中间自适应

#### 1. float + margin ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>CSS实现三栏布局1</title>
        <style type="text/css">
          .left {
        
            width: 200px;
            height: 300px;
            background-color: #dc698a;
            float: left;
          }
          .middle {
        
            height: 300px;
            background-color: #8cb08b;
            margin: 0 200px;
          }
          .right {
        
            width: 200px;
            height: 300px;
            background-color: #3eacdd;
            float: right;
          }
        </style>
      </head>
      <body>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
        <div class="middle">中间栏</div>
      </body>
    </html>

#### 2. float + BFC ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>CSS实现三栏布局1</title>
        <style type="text/css">
          .left {
        
            width: 200px;
            height: 300px;
            background-color: #dc698a;
            float: left;
          }
          .middle {
        
            height: 300px;
            background-color: #8cb08b;
            overflow: hidden;
          }
          .right {
        
            width: 200px;
            height: 300px;
            background-color: #3eacdd;
            float: right;
          }
        </style>
      </head>
      <body>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
        <div class="middle">中间栏</div>
      </body>
    </html>

**注意：上面两种方法都必须先渲染right,否则right会被middle挤下来**

#### 3. 定位 + margin(或者定位+BFC) ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>CSS实现三栏布局3</title>
        <style type="text/css">
          .container {
        
            position: relative;
          }
          .left {
        
            width: 200px;
            height: 300px;
            background-color: #dc698a;
            position: absolute;
          }
          .middle {
        
            height: 300px;
            background-color: #8cb08b;
            margin: 0 200px;
          }
          .right {
        
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            height: 300px;
            background-color: #3eacdd;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="left">左栏</div>
          <div class="middle">中间栏</div>
          <div class="right">右栏</div>
        </div>
      </body>
    </html>

#### 4. flex布局 ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .container {
        
            height: 300px;
            display: flex;
          }
          .left,
          .right {
        
            width: 100px;
            background: red;
          }
          .center {
        
            flex: 1;
            background: green;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
      </body>
    </html>

#### 5. 圣杯布局 ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <style>
          .container {
        
            height: 200px;
            overflow: hidden;
            padding: 0 200px;
          }
          .center {
        
            width: 100%;
            height: 200px;
            background-color: green;
            float: left;
          }
          .left {
        
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
          }
          .right {
        
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="center"></div>
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </body>
    </html>

#### 6. 双飞翼布局 ####