CSS常见布局

头像
梁柱
    阅读 7 分钟

    两列自适应布局

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

    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>
    前端css3布局flexgrid
    梁柱
    135 声望12 粉丝
    « 上一篇
    JavaScript模块
    下一篇 »
    JavaScript 函数

    引用和评论

    推荐阅读
    头像
    简述字符集与编码

    梁柱阅读 4.6k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.5k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 3.6k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 4阅读 3.7k

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.1k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.4k

    0 条评论
    得票最新