经典布局（flex和传统两种实现）—左右页眉页脚

ゝ一世哀愁。 2022-01-10 14:21 315阅读 0赞

### 1.浮动法 ###

> 上中下：都是块元素。定宽，定高
> 
> 中：定宽高： 左右：浮动且定宽高
> 
> 这种方式其实并不好，写了好多代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
              width: 900px;
              margin: 0 auto;
            }
            #header{
              height: 100px;
              background: blueviolet
            }
            #main{
              height: 500px;/* 父级设置宽高也是一种清浮动的方式 */
              border: 1px solid red;
            }
            #footer{
              height: 150px;
              background: blueviolet
            }
    
            #left{
              float: left;
              width: 200px;
              height: 500px;
              background: greenyellow;
            }
            #right{
              float: left;
              width: 700px;
              height: 500px;
              background: orange;
            }
        </style>
    </head>
    <body>
    <header id="header" class="wrap"></header>
    <section id="main" class="wrap">
      <aside id="left"></aside>
      <div id="right"></div>
    </section>
    <footer id="footer" class="wrap"></footer>
    
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2. flex方法 ###

> 上中下：因为都是块元素，所以只需要设置宽高，就会依次向下排列
> 
> 中:display:flex; 左:flex:0 0 200px; 右：flex：1

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap{
              width: 900px;
              margin: 0 auto;
            }
            #header{
              background: #66ccff;
              height: 100px;
            }
            #main{
              background: #ffcccc;
              height: 500px;
              display: flex;
            }
            #footer{
              background: #99ccff;
              height: 150px;
            }
    
            #left{
              background: #ccffff;
              flex: 0 0 200px;
            }
            #right{
              background: #7cd677;
              flex: 1
            }
        </style>
    </head>
    <body>
    
    <header id="header" class="wrap"></header>
    <section id="main" class="wrap">
        <aside id="left"></aside>
        <div id="right"></div>
    </section>
    <footer id="footer" class="wrap"></footer>
    
    </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/20220110/42a344b9788140cea884007ac0fe76fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220110/fde07e69e7d9474289a9d9b2e45bba61.png