经典布局（flex和传统两种实现）—左中右三栏式

本文链接：https://blog.youkuaiyun.com/jiaojsun/article/details/92991036

1.浮动法

父级宽度：80%

左右：定宽高, 分别浮动向左，浮动向右

中: margin: 0 200px; 定高

注意，中间的块元素必须放在后面

左右定宽，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          width: 80%;
          margin: 0 auto;
        }
        #left{
          background: #ccffff;
          float: left;
          width: 200px;
          height: 500px;
        }
        #right{
          background: #ccffff;
          float: right;
          width: 200px;
          height: 500px;
        }
        #main{
          background: #ffcccc;
          margin:0 200px;
          height: 500px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <aside id="right"></aside>
    <section id="main"></section>
</div>

</body>
</html>

2.flex法

父级：宽度百分比。定高，flex布局

左右： flex：0 0 200px;

中： flex：1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          margin: 0 auto;
          width: 80%;
          height: 500px;
          display: flex;
        }
        #left{
          background: #ccffff;
          flex: 0 0 200px;
        }
        #right{
          background: #ccffff;
          flex: 0 0 100px;
        }
        #main{
          background: #ffcccc;
          flex: 1;
        }
    </style>
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <section id="main"></section>
    <aside id="right"></aside>
</div>

</body>
</html>

3.双飞翼布局

其实也就是左中右三栏式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            margin:0 auto;
            width:80%
        }
        #main{
            width:100%;
            float: left;
            background: #ffcccc;
        }
        #left{
            width:200px;
            float: left;
            height:500px;
            background: #ccffff;
            margin-left: -100%;
        }
        #right{
            width:200px;
            float: left;
            height:500px;
            background: #ccffff;
            margin-left:-200px;
        }
        .content{
            height:500px;
            margin:0 200px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <section id="main">
        <div class="content">#content</div>
    </section>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</div>

</body>
</html>

题外话，这也是我遇到的一个面试题，上下定高，中间自适应怎么做

vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
          margin: 0 auto;
          width: 80%;
          height: 100vh; //重点
          display: flex;
          flex-direction: column;
        }
        #left{
          background: #ccffff;
          flex: 0 0 100px;
        }
        #right{
          background: #ccffff;
          flex: 0 0 100px;
        }
        #main{
          background: #ffcccc;
          flex: 1;
        }
    </style>
</head>
<body>

<div class="wrap">
    <aside id="left"></aside>
    <section id="main"></section>
    <aside id="right"></aside>
</div>

</body>
</html>