CSS系列 - 布局

小刘鸭地下城
95 阅读4分钟

一栏布局

  • header, content 和 footer 等宽的单列布局
  • header 与 footer 等宽, content 略窄的单列布局

一栏布局.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>一栏布局</title>
    <style>
      .container {
        max-width: 960px;
        margin: 0 auto;
      }
      .header {
        height: 100px;
        background-color: blue;
      }
      .content {
        height: 400px;
        background-color: aquamarine;
      }
      .footer {
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通栏</title>
    <style>
      .container {
        margin: 0 auto;
      }
      .header {
        height: 100px;
        background-color: blue;
      }
      .content {
        margin: 0 auto;
        max-width: 800px;
        height: 400px;
        background-color: aquamarine;
      }
      .footer {
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

两栏布局

两列自适应布局

  • float + overflow:hidden
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>左边固定右边自适应</title>
    <style>
      .parent {
        overflow: hidden;
      }
      .left {
        float: left;
        margin-right: 20px;
      }
      .right {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="parent" style="background-color: lightgrey">
      <div class="left" style="background-color: lightblue">
        <p>left</p>
      </div>
      <div class="right" style="background-color: lightgreen">
        <p>right</p>
        <p>right</p>
      </div>
    </div>
  </body>
</html>
  • flex 布局
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      .parent {
        display: flex;
      }
      .right {
        margin-left: 20px;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="parent" style="background-color: lightgrey">
      <div class="left" style="background-color: lightblue">
        <p>left</p>
      </div>
      <div class="right" style="background-color: lightgreen">
        <p>right</p>
        <p>right</p>
      </div>
    </div>
  </body>
</html>
  • grid 布局
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid</title>
    <style>
      .parent {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="parent" style="background-color: lightgrey">
      <div class="left" style="background-color: lightblue">
        <p>left</p>
      </div>
      <div class="right" style="background-color: lightgreen">
        <p>right</p>
        <p>right</p>
      </div>
    </div>
  </body>
</html>

三栏布局

圣杯布局

float + margin 负值 + positon

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中间列自适应宽度，旁边两侧固定宽度</title>
    <style>
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;
      }
      .left {
        width: 200px;
        height: 400px;
        background: red;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -220px;
      }
      .center {
        width: 100%;
        height: 500px;
        background: yellow;
        float: left;
      }
      .right {
        width: 200px;
        height: 400px;
        background: blue;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -220px;
      }
    </style>
  </head>
  <body>
    <article class="container">
      <div class="center">
        <h2>圣杯布局</h2>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </article>
  </body>
</html>

优点

内容优先渲染

缺点

  • center 部分的最小宽度不能小于 left 部分的宽度
  • 不会自动等高

双飞翼布局

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双飞翼布局</title>
    <style>
      .container {
        min-width: 600px;
        overflow: hidden;
      }
      .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
      }
      .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
      }
      .center .inner {
        margin: 0 200px;
      }
      .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
      }
    </style>
  </head>
  <body>
    <article class="container">
      <div class="center">
        <div class="inner">双飞翼布局</div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </article>
  </body>
</html>

上下固定中间自适应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>position</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }

      .header {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100px;
        background: red;
      }

      .container {
        position: absolute;
        top: 100px;
        bottom: 100px;
        width: 100%;
        background: green;
      }

      .footer {
        position: absolute;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      body {
        height: 100%;
      }

      body {
        display: flex;
        padding: 0;
        margin: 0;
        flex-direction: column;
      }

      .header {
        height: 100px;
        background: red;
      }

      .container {
        flex-grow: 1;
        background: green;
      }

      .footer {
        height: 100px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
  </body>
</html>

多列等高

flex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .Article {
        display: flex;
      }

      .Article > li {
        flex: 1;
        border-left: solid 5px currentColor;
        border-right: solid 5px currentColor;
        color: #fff;
        background: #4577dc;
      }

      .Article > li > p {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="Article">
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>一家将客户利益置于首位的经纪商</p>
      </li>
    </ul>
  </body>
</html>

grid

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid</title>
    <style>
      ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .Article {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 20px;
      }

      .Article > li {
        border-left: solid 5px currentColor;
        border-right: solid 5px currentColor;
        color: #fff;
        background: #4577dc;
      }

      .Article > li > p {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="Article">
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>一家将客户利益置于首位的经纪商</p>
      </li>
    </ul>
  </body>
</html>

js 计算

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js计算</title>
    <style>
      ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .Article {
        overflow: hidden;
      }
      .Article > li {
        float: left;
        border: solid 5px #fff;
        width: 30%;
        color: #fff;
        font-size: 16px;
        background: #4577dc;
      }

      .Article > li > p {
        padding: 10px;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <ul class="Article">
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>一家将客户利益置于首位的经纪商</p>
      </li>
    </ul>
    <script>
      jQuery(document).ready(function () {
        setEqualheight();
      });

      jQuery(window).resize(function () {
        jQuery(".js-article-item").css("height", "auto");
        setEqualheight();
      });

      function setEqualheight() {
        var height = jQuery(".js-article-item")
          .map(function () {
            return jQuery(this).height();
          })
          .get();

        jQuery(".js-article-item").height(Math.max.apply(null, height));
      }
    </script>
  </body>
</html>

padding-bottom 与 margin-bottom

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>padding-bottom与margin-bottom</title>
    <style>
      ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .Article {
        overflow: hidden;
      }

      .Article > li {
        float: left;
        margin: 0 10px -9999px 0;
        padding-bottom: 9999px;
        background: #4577dc;
        width: 200px;
        color: #fff;
      }

      .Article > li > p {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="Article">
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>一家将客户利益置于首位的经纪商</p>
      </li>
    </ul>
  </body>
</html>

table-cell

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table-cell</title>
    <style>
      ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .Article {
        display: table;
        width: 100%;
        table-layout: fixed;
      }

      .Article > li {
        display: table-cell;
        width: 200px;
        border-left: solid 5px currentColor;
        border-right: solid 5px currentColor;
        color: #fff;
        background: #4577dc;
      }

      .Article > li > p {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="Article">
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
          为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
          一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
        </p>
      </li>
      <li class="js-article-item">
        <p>一家将客户利益置于首位的经纪商</p>
      </li>
    </ul>
  </body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位</title>
    <style>
      .outer {
        width: 960px;
        margin: 0 auto;
        border: 1px solid #000;
        overflow: hidden;
        background-color: green;
        color: #fff;
      }
      .left {
        width: 200px;
        position: relative;
        float: left;
      }
      .equh {
        width: 100%;
        height: 999em;
        position: absolute;
        left: 0;
        top: 0;
        border-right: 1px solid #000;
        background-color: orange;
      }

      .left-con {
        padding: 1em;
        position: relative;
        z-index: 1;
      }
      .right {
        padding: 1em;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">
        <div class="equh"></div>
        <div class="left-con">
          <p>left</p>
          <p>left</p>
          <p>left</p>
        </div>
      </div>
      <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
      </div>
    </div>
  </body>
</html>

粘连布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>粘连布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      #wrap {
        min-height: 100%;
        background: pink;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        background: deeppink;
        margin-top: -50px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="main">
        main <br />
        main <br />
        main <br />
      </div>
    </div>
    <div id="footer">footer</div>
  </body>
</html>

一屏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <style>
        html,body{
            height: 100%;
            padding: 0;
            margin: 0;
        }
        /* .container{
            height: 100%;
            position: relative;
        }
        .fix{
            height: 100px;
        }
        .adjust{
            position: absolute;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
        } */
        /* .container{
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }
        .fix{
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        .adjust{
            height: 100%;
        } */
        .container{
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
        }
        .fix{
            height: 100px;
            margin: -100px 0 0;
        }
        .adjust{
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fix"></div>
        <div class="adjust"></div>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝