# 五种基本布局布局

# table布局

table的特性决定了其适合用来做布局，并且表格中的内容可以自动居中

空间平均划分：子容器默认自动平分宽度的
设置了一个table-cell为固定的宽度之后，其余的自动平分占满父容器

优点：兼容性好，布局相对简单，上手快缺点：

table占用了更多的字节，下载时间延迟，占用服务器更多的资源
table会阻挡浏览器渲染引擎的顺序，页面生成速度延迟
灵活性比较差，不易更改
不利于搜索引擎抓取信息，影响网站的排名

.box{
    width: 100%;
    display: table;
}
.left,.right{
    display: table-cell;
}
.left{
    background: yellowgreen;
}
.right{
    background: skyblue;
}

<table class="box">
    <tbody>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
    </tbody>
</table>

# float布局

float布局仍然是当前用的比较多的一种布局方式关于浮动就是元素脱离原有的文档流，但是不脱离文本流（可以类比word的文字环绕）浮动可以改变原有的元素的display属性

常见问题之高度塌陷

.container{
    width: 200px;
    background-color:red;
}
.left{
    background-color: yellow; 
    float: left;
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow; 
    float: right;
    height: 50px;
    width:50px;
}

<div class=container>       
    <span class=left>左</span>
    <span>塌陷文字</span>
    <span class=right>右</span>
</div>

虽然两个浮动元素包含在父元素中，但是却超出了container的范围，在文档流中，父元素的高度默认会被子元素撑开但是子元素设置了浮动之后，子元素会完全的脱离文档流，导致子元素无法撑起父元素高度，导致父元素高度塌陷

解决办法

.container::after{
	content:'';
	clear:both;
	display:block;
	visibility:hidden;
	height:0; 
}

优点：兼容性较好缺点：需要清除浮动，否则页面的布局会塌陷

# absolute布局

.container > div {
    position: absolute;
}
.left{
    left: 0;
    width: 300px;
    background: red;
}
.center{
    left: 300px;
    right: 300px;
    background: yellow;
}
.right{
    right: 0px;
    width: 300px;
    background: blue;
}

<div class="container">       
    <div class="left">左</div>
    <div class="center">
        <h2>绝对定位</h2>
    </div>
    <div class="right">右</div>
</div>

# flex布局

flex弹性布局，鉴于在盒子模型上，首先盒子本来就是并列的，只需要指定宽度就可以了

.container{
    height:200px;
    width: 200px;
    display: flex
}
.left{
    background-color: red; 
    flex: 1;
}
.middle{
    background-color: yellow; 
    flex: 1;    
}
.right{
    background-color: green;
    flex: 1;
}

<div class="container">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div>

优点：简单，灵活，对移动端友好缺点：浏览器的兼容性不是很好，一些浏览器不是很支持

# grid布局

.container {
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
.left{
    background: red;
}
.center{
    background: yellow;
}
.right{
    background: blue;
}

<div class="container">       
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
</div>

优点：代码量简化比较多缺点：浏览器的兼容性不是很好，一些浏览器不是很支持

# 水平垂直居中

absolute+margin-top（宽高确定）

.outer {
    position: relative
}

.inner {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

absolute + transform

.outer {
    position: relative
}

.inner {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex + margin: auto

.outer {
    display: flex;
}
.inner {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: auto;
}

flex

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

# 两栏布局

float + margin-left 或者 float + overflow: auto

<style>
	.aside {
        width: 30vw;
        height: 100vh;
        float: left;
        background: blue;
    }

    .main {
        margin-left: 30vw;
        // 或者换成 overflow: auto，使其成为BFC
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main">
        <div class="content"></div>
    </div>
</body>

flex

<style>
    body {
        display: flex;
    }
    .aside {
        flex: 25vw;
    }
    .main {
        flex: 1; // 等于flex-grow: 1;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

# 三栏布局

圣杯布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>实现三栏水平布局之圣杯布局</title>
    <style type="text/css">
      /*基本样式*/
      .left, .right, .main {
        min-height: 300px;
      }
      .left {
        width: 200px;
        background-color:thistle;
      }
      .main {
        background-color: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 圣杯布局关键代码 */
      .left, .main, .right {
        float: left;
        position: relative;
      }
      .main {
        width: 100%;
      }
      .container {
        padding-left: 200px;
        padding-right: 300px;
      }
      .left {
        margin-left: -100%;
        left: -200px;
      }
      .right {
        margin-left: -300px;
        right: -300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main">main</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="main"><div class="main-inner">中心区</div></div>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>

flex布局

<style>
	.left {
        width: 30vw;
    }
    .main {
        flex: 1;
    }
    .right {
        width: 20vw;
    }
</style>
<body>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</body>

# 总结

圣杯布局在DOM结构上显得更加直观和自然；双飞翼布局省去了很多css，而且由于不用使用定位，可以获得比圣杯布局更小最小宽度；说到这里需要注意一下由于双飞翼布局会一直随着浏览器可视区域宽度减小从而不断挤压中间部分宽度。所以需要设置给页面一个min-width > LeftWidth + RightWidth；

Indomite

Choose mode

五种基本布局布局