经典布局（flex和传统两种实现）—上中下一栏式

妖狐艹你老母 2022-01-11 03:17 249阅读 0赞

### 1.传统方式 ###

简言之：就是按照每个块元素占一行的方式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin:0;
                font-size:20px;
                text-align: center;
            }
            .warp{
                width: 900px;
                margin:0 auto;
            }
            #header{
                height:100px;
                background: #6cf;
            }
            #main{
                height:500px;
                background: #ccffff;
            }
            #footer{
                height:80px;
                background: #99ccff;
            }
        </style>
    </head>
    <body>
    
    <header id="header" class="warp">#header</header>
    <section id="main" class="warp">#section</section>
    <footer id="footer" class="warp">#footer</footer>
    
    </body>
    </html>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2.flex 方式 ###

关键代码

父级：display: flex;   flex-direction: column;

子级： 设置为flex:1(则高度由字体撑起来) ，设置为flex: 0 0 500px(则高度为500px，设置height无效)

知识点

> flex: 1 =? 1 1 0%
> 
> flex: auto => 1 1 auto
> 
> flex: none => 0 0 auto;
> 
> flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height)

<!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin:0;
                font-size:20px;
                text-align: center;
            }
    
            .warp{
                margin:0 auto;
            }
    
            .holy {
              display: flex;
              flex-direction: column;
            }
            #header{
                width: 900px;
                /* height无效 */
                height:400px;
                background: #6cf;
                flex: 1;
            }
            #main{
                width: 900px;
                background: #ccffff;
                flex: 0 0 500px
            }
            #footer{
                width: 900px;
                /* height无效 */
                height:180px;
                background: #99ccff;
                flex: 1;
            }
    
            /* .
              flex: 1 =? 1 1 0%
              flex: auto => 1 1 auto
              flex: none => 0 0 auto;
    
              flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height)
            */
        </style>
    </head>
    <body>
    <div class="holy">
      <header id="header" class="warp">#header</header>
      <section id="main" class="warp">#section</section>
      <footer id="footer" class="warp">#footer</footer>
    </div>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220111/fc85cd23d6c044f5a2eee398cf5c2309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220111/f59a12562da1415fb8f28c084e929020.png