作者: 我不吃饼干呀

CSS 部分

两栏布局

要求：垂直两栏，左边固定右边自适应。

<!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>Document</title>
    <style>
    .outer {
        height: 100px;
        margin-bottom: 10px;
    }
    .left {
        background: tomato;
        height: 100px;
    }
    .right {
        background: gold;
        height: 100px;
    }
    /* 浮动 */
    .outer1 .left {
        width: 200px;
        float: left;
    }
    .outer1 .right {
        width: auto;
        margin-left: 200px;
    }
    /* flex */
    .outer2 {
        display: flex;
    }
    .outer2 .left {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 200px;
    }
    .outer2 .right {
        flex: auto; /* 1 1 auto */
    }
    /* position */
    .outer3 {
        position: relative;
    }
    .outer3 .left {
        position: absolute;
        width: 200px;
    }
    .outer3 .right {
        margin-left: 200px;
    }
    /* position again */
    .outer4 {
        position: relative;
    }
    .outer4 .left {
        width: 200px;
    }
    .outer4 .right {
        position: absolute;
        top: 0;
        left: 200px;
        right: 0;
    }
</style>
</head>
<!-- 左右两栏，左边固定，右边自适应 -->
<body>
    <div class="outer outer1">
        <div class="left">1-left</div>
        <div class="right">1-right</div>
    </div>
    <div class="outer outer2">
        <div class="left">2-left</div>
        <div class="right">2-right</div>
    </div>
    <div class="outer outer3">
        <div class="left">3-left</div>
        <div class="right">3-right</div>
    </div>
    <div class="outer outer4">
        <div class="left">4-left</div>
        <div class="right">4-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>Document</title>
    <style>
    .outer {
        height: 100px;
        margin-bottom: 10px;
    }
    .left {
        background: tomato;
        height: 100px;
    }
    .right {
        background: gold;
        height: 100px;
    }
    /* 浮动 */
    .outer1 .left {
        width: 200px;
        float: left;
    }
    .outer1 .right {
        width: auto;
        margin-left: 200px;
    }
    /* flex */
    .outer2 {
        display: flex;
    }
    .outer2 .left {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 200px;
    }
    .outer2 .right {
        flex: auto; /* 1 1 auto */
    }
    /* position */
    .outer3 {
        position: relative;
    }
    .outer3 .left {
        position: absolute;
        width: 200px;
    }
    .outer3 .right {
        margin-left: 200px;
    }
    /* position again */
    .outer4 {
        position: relative;
    }
    .outer4 .left {
        width: 200px;
    }
    .outer4 .right {
        position: absolute;
        top: 0;
        left: 200px;
        right: 0;
    }
</style>
</head>
<!-- 左右两栏，左边固定，右边自适应 -->
<body>
    <div class="outer outer1">
        <div class="left">1-left</div>
        <div class="right">1-right</div>
    </div>
    <div class="outer outer2">
        <div class="left">2-left</div>
        <div class="right">2-right</div>
    </div>
    <div class="outer outer3">
        <div class="left">3-left</div>
        <div class="right">3-right</div>
    </div>
    <div class="outer outer4">
        <div class="left">4-left</div>
        <div class="right">4-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>Document</title>
    <style>
        .outer, .left, .middle, .right {
            height: 100px;
            margin-bottom: 5px;
        }
        .left {
            background: tomato;
        }
        .middle {
            background: lightgreen;
        }
        .right {
            background: gold;
        }
        /* 圣杯布局 通过浮动和负边距实现 */
        .outer1 {
            padding: 0 200px 0 100px;
        }
        .outer1 .middle {
            width: 100%;
            float: left;
        }
        .outer1 .left {
            width: 100px;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .outer1 .right {
            width: 200px;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
        /* 双飞翼布局 */
        .outer2 .middle-wrapper {
            width: 100%;
            float: left;
        }
        .outer2 .middle {
            margin: 0 200px 0 100px;
        }
        .outer2 .left {
            width: 100px;
            float: left;
            margin-left: -100%;
        }
        .outer2 .right {
            width: 200px;
            float: left;
            margin-left: -200px;
        }
</style>
</head>
<!-- 三栏布局 左右固定 中间自适应 -->
<body>
    <!-- 圣杯布局 middle 最先 -->
    <div class="outer outer1">
        <div class="middle">圣杯-middle</div>
        <div class="left">圣杯-left</div>
        <div class="right">圣杯-right</div>
    </div>
    <!-- 双飞翼布局 middle 最先 多一层 div -->
    <div class="outer outer2">
        <div class="middle-wrapper">
            <div class="middle">双飞翼布局-middle</div>
        </div>
        <div class="left">双飞翼布局-left</div>
        <div class="right">双飞翼布局-right</div>
    </div>
</body>
</html>

三角形

实现一个三角形

常见题目，通过 border 实现

<!DOCTYPE html>
<html>
<head>
  <title>三角形</title>
  <style type="text/css">
    .box1, .box2, .box3, .box4 {
      height: 0px;
      width: 0px;
      float: left;
      border-style: solid;
      margin: 10px;
    }
    .box1 { /* 等腰直角 */
      border-width: 100px;
      border-color: tomato transparent transparent transparent;
    }
    .box2 { /* 等边 */
      border-width: 100px 173px;
      border-color: transparent tomato transparent transparent;
    }
    .box3 { /* 等腰 */
      border-width: 100px 80px;
      border-color: transparent transparent tomato transparent;
    }
    .box4 { /* 其他 */
      border-width: 100px 90px 80px 70px;
      border-color: transparent transparent transparent tomato;
    }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>
</html>

正方形

使用 css 实现一个宽高自适应的正方形

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /* 都是像对于屏幕宽度的比例 */
      .square1 {
        width: 10%;
        height: 10vw;
        background: red;
      }
      /* margin/padding 百分比是相对父元素 width 的 */
      .square2 {
        width: 20%;
        height: 0;
        padding-top: 20%;
        background: orange;
      }
      /* 通过子元素 margin */
      .square3 {
        width: 30%;
        overflow: hidden; /* 触发 BFC */
        background: yellow;
      }
      .square3::after {
        content: '';
        display: block;
        margin-top: 100%; /* 高度相对于 square3 的 width */
      }
</style>
  </head>
  <!-- 画一个正方形 -->
  <body>
    <div class="square1"></div>
    <div class="square2"></div>
    <div class="square3"></div>
  </body>
</html>

CSS 部分

两栏布局

三栏布局

圣杯布局 和 双飞翼布局

三角形

正方形

圣杯布局和双飞翼布局