CSS常见布局 - HelloWorld开发者社区

两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

1.float+overflow:hidden

<style>
    .contain {
        overflow: hidden;
        zoom: 1;
    }
    .left {
        float: left;
        background: blue;
    }
    .right {
        overflow: hidden;
        zoom: 1;
        background: yellow;
    }
</style>
<div class="contain">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</div>

2.flex布局

<style>
    .contain {
        display: flex;
    }
    .right {
        flex: 1;
    }
</style>
<div class="contain">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</div>

3.grid布局

<style>
    .contain {
        display: grid;
        grid-template-columns: auto 1fr;
    }
</style>
<div class="contain">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</div>

三栏布局——两边固定宽度中间自适应

1.float布局

float布局使用时注意清除浮动。

<style>
    /*父元素清除浮动*/
    .float:after {
        content: "";
        height: 0;
        display: block;
        clear: both;
        visibility: hidden;
    }
    .float {
        *zoom: 1;
    }
    .float .left {
        float: left;
        width: 300px;
        height: 300px;
        background: red;
    }
    .float .right {
        float: right;
        width: 300px;
        height: 300px;
        background: blue;
    }
    .float .center {
        background: yellow;
        height: 400px;
        margin-left: 300px;
        margin-right: 300px;
    }
</style>
<section class="float">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="center">中间</div>
</section>

2.Position 布局

Position布局只是根据定位属性去直接设置元素位置。不推荐使用

<style>
    .position {
        position: relative;
    }
    .position .left {
        position: absolute;
        left: 0;
        width: 300px;
        height: 300px;
        background: red;
    }
    .position .center {
        position: absolute;
        left: 300px;
        right: 300px;
        height: 400px;
        background: yellow;
    }
    .position .right {
        position: absolute;
        right: 0;
        width: 300px;
        height: 300px;
        background: blue;
    }
</style>
<section class="position">
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
</section>

3.Flex 布局

flex布局比较强大,只能支持到IE10及以上。

<style>
    .flex {
        display: flex;
    }
    .flex .left {
        width: 300px;
        background: red;
    }
    .flex .center {
        flex: 1;
        background: yellow;
    }
    .flex .right {
        width: 300px;
        background: blue;
    }
</style>
<section class="flex">
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
</section>

4.table 布局

table布局使用起来方便,没有兼容性也不存在问题，但使用不方便

 <style>
    .table {
        width: 100%;
        display: table;
    }
    .table .left {
        display: table-cell;
        width: 300px;
        background: red;
    }
    .table .center {
        display: table-cell;
        background: yellow;
    }
    .table .right {
        display: table-cell;
        width: 300px;
        background: blue;
    }
</style>
<section class="table">
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
</section>

5.grid布局

grid布局很强大，但是兼容性很差。

<style>
    .grid {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }
    .grid .left {
        background: red;
    }
    .grid .center {
        background: yellow;
    }
    .grid .right {
        background: blue;
    }
</style>
<section class="grid">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="center">中间</div>
</section>

圣杯布局

三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .main {
      padding-left: 300px;
      padding-right: 300px;
    }
    .center {
      float: left;
      width: 100%;
      height: 400px;
      background: #4ba946;
    }
    .left {
      float: left;
      width: 300px;
      height: 300px;
      background: #0376c2;
      margin-left: -100%;
      position: relative;
      left: -300px;
    }
    .right {
      float: left;
      width: 300px;
      height: 300px;
      background: #9889c1;
      margin-left: -300px;
      position: relative;
      right: -300px;
    }
  </style>
</head>
<body>
<section class="main">
  <div class="center">中间</div>
  <div class="left">左边</div>
  <div class="right">右边</div>
</section>
</body>

缺点:
center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)

双飞翼布局

实现步骤(前两步与圣杯布局一样)
三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层div，并设margin: 0 200px；

缺点
多加一层 dom 树节点，增加渲染树生成的计算量。

多列等高布局——圣杯布局

实现步骤：
1.三部分都设定为浮动，设置center的宽度为100%。
2.设置 left 和 right的margin-left为负值让left和right部分回到与center部分同一行。
3.设置相对定位，让left和right部分移动到两边。
4.伪等高布局

.container {
    overflow: hidden;//把溢出背景切掉
}
.center,.left,.right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

示例：

<style>
    .container {
        padding-left: 300px;
        padding-right: 300px;
        overflow: hidden;
    }
    /*关键*/
    .container .center, .left, .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
    }
    .container .center {
        float: left;
        width: 100%;
        height: 400px;
        background: yellow;
    }
    .container .left {
        float: left;
        width: 300px;
        height: 300px;
        margin-left: -100%;
        background: red;
        position: relative;
        left: -300px;
    }
    .container .right {
        float: left;
        width: 300px;
        height: 300px;
        margin-left: -300px; /*right 的宽度*/
        background: blue;
        position: relative;
        right: -300px;
    }
</style>
<section class="container">
    <div class="center">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</section>

粘连布局

描述：
有一块内容<main>，当<main>的高度足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部。
实现步骤：

<style>
    html, body {
        height: 100%;
    }
    .wrap {
        min-height: 100%;/*设置min-height，变为视口高度*/
        background: blue;
        overflow: hidden;
    }
    .main {
        padding-bottom: 50px;
    }
    .footer {
        height: 50px;
        margin-top: -50px;
        background: red;
    }
</style>
<div class="wrap">
    <article class="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </article>
</div>
<footer class="footer">footer</footer>