CSS布局技巧大全

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS布局技巧大全相关的知识，希望对你有一定的参考价值。

参考资料：
http://www.imooc.com/article/2235

单列布局

水平居中

  1. 父元素text-align:center;子元素：inline-block;
  • 优点：兼容性好；

  • 不足：需要同时设置子元素和父元素

    <!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>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
  1. 子元素margin:0 auto;
  • 优点：兼容性好
  • 缺点：需要指定宽度
<!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>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 子元素{display:table;margin:0 auto;}
  • 优点:只需要对自身进行设置
  • 不足:IE6,7需要调整结构
<!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>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
            display:table;margin:0 auto;s
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半
  • 优点：兼容性好
  • 缺点：需要知道子元素的宽度
<!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>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);
  • 优点：兼容性差
  • 缺点：不需要知道子元素的宽度
<!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>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 弹性盒子：父元素：display:flex;justify-content:center;
  • 优点：简单

  • 缺点：兼容性差

    <!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>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        display: flex;
        justify-content: center;
    }
    .child {
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

垂直居中

  1. vertical-align:center;
<!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>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></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>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            vertical-align:middle;
            line-height:450px;            
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->
  1. 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);
<!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>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;          
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50%;
            left:0;
            transform: translate(0,-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

  1. 父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

  2. 父元素：display:flex;align-items:center;

<!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>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            align-items: center;        
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

水平垂直居中

  1. 父元素：display:table-cell;vertical-align:middle;text-align:center;
    子元素；display:inline-block;
<!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>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
            text-align:center; 
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素：position:relative;
    子元素：position:absolute??50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者transform:translate(-50%,-50%);
<!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>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            left: 0;
            right: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素{display:flex;justify-content:center;align-items:center;}
<!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>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

多列布局

左侧定宽，右侧自适应

  1. .left{float:left;width:100px;}
    .right{margin-left:100px;}
<!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>
    * {
      margin:0;
      padding:0;
    }
    .left {
      height: 400px;
      width:300px;
      background:red;
      float: left;
    }
    .right {
      height: 400px;
      margin-left:300px;
      background:blue;
    }
  </style>
</head>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
</html>
  1. <!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>
* {
  margin:0;
  padding:0;
}
.left{
  width:300px;
  height:400px;
  float:left;
  background:red;
} 
.right-fix{
  width:100%;
  margin-left:-300px;
  float:right;
} 
.right
{
  margin-left:300px;
  height:400px;
  background:blue;
}
  </style>
</head>
<body>
<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right-fix">
    <div class="right">
      right
    </div>
  </div>
</div>
</body>
</html>
  2. .left{width:宽度值;float:left;} .right{overflow:hidden;}
<!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>
    * {
      margin:0;
      padding:0;
    }
    .left{
      width:300px;
      height:400px;
      float:left;
      background:red;
    } 
    .right
    {
      height:400px;
      background:blue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. table实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      display:table;
      table-layout:fixed;
      width:100%;
    }
    .left{
      width:300px;
      height:400px;
      background:red;
      display: table-cell;
    } 
    .right
    {
      height:400px;
      background:blue;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      display:flex;
      width:100%;
    }
    .left{
      width:300px;
      height:400px;
      background:red;
    } 
    .right
    {
      height:400px;
      background:blue;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

右侧定宽左侧自适应

  1. float+margin实现

    <!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>
* {
  margin:0;
  padding:0;
}
.left{
  width:100%;
  height:400px;
  background:red;
  float:left;
  margin-right: -300px;
} 
.right
{
  height:400px;
  background:blue;
  width: 300px;
  float: right;
}
  </style>
</head>
<body>
<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>
</body>
</html>

  2. table实现

<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;

    }
    .left{
      width:100%;
      height:400px;
      background:red;
      display: table-cell;
    } 
    .right
    {
      height:400px;
      background:blue;
      width: 300px;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;

    }
    .left{
      flex:1;
      background:red;
      display: table-cell;
    } 
    .right
    {
      height:400px;
      background:blue;
      width: 300px;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

左边两列定宽，右侧自适应

  1. float+margin实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;

    }
    .left,.center{
      background:red;
      float: left;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      margin-left: 600px;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. float+overflow实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;

    }
    .left,.center{
      background:red;
      float: left;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. table实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .left,.center{
      background:red;
      display: table-cell;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .left,.center{
      background:red;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

左右定宽，中间自适应

  1. float+margin实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
    }
    .left,.right{
      background:red;
      width: 300px;
      height: 400px;
      float: left;
    }
    .right {
      background:yellow;
      float: right;
    } 
    .center
    {
      height:400px;
      background:blue;
      width:100%;
      float: left;
      margin-right:-600px;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. table实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .left,.right{
      background:red;
      width: 300px;
      height: 400px;
      display: table-cell;
    }
    .right {
      background:yellow;
    } 
    .center
    {
      height:400px;
      background:blue;
      width:100%;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .left,.right{
      background:red;
      width: 300px;
      height: 400px;
    }
    .right {
      background:yellow;
    } 
    .center
    {
      height:400px;
      background:blue;
      width:100%;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

一列不定宽，一列自适应

  1. table实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: auto; /*原文写的fixed，这是不对的*/
    }
    .left{
      background:red;
      height: 400px;
      display: table-cell;
      width: 0.1%;
    }
    .right {
      background:yellow;
      height: 400px;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        leftffffffffffffff
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. BFC盒子
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
    }
    .left{
      background:red;
      height: 400px;
      float: left;
    }
    .right {
      background:yellow;
      height: 400px;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        leftffffffffffffff
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .left{
      background:red;
      height: 400px;
    }
    .right {
      background:yellow;
      height: 400px;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        leftffffffffffffff
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

多列等分布局

  1. float+padding+margin
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
      margin-left:-10px;
    }
    .col {
      height: 400px;
      float: left;
      padding-left: 10px;
      box-sizing: border-box;
      width:25%;
    }
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="col" style="background:yellow;">
        col1
      </div>
      <div class="col" style="background:red;">
        col2
      </div>
      <div class="col" style="background:green;">
        col3
      </div>
      <div class="col" style="background:blue;">
        col4
      </div> 
    </div>
</body>
</html>
  1. table实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .col {
      height: 400px;
      display: table-cell;
    }
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="col" style="background:yellow;">
        col1
      </div>
      <div class="col" style="background:red;">
        col2
      </div>
      <div class="col" style="background:green;">
        col3
      </div>
      <div class="col" style="background:blue;">
        col4
      </div> 
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .col {
      height: 400px;
      flex:1;
    }
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="col" style="background:yellow;">
        col1
      </div>
      <div class="col" style="background:red;">
        col2
      </div>
      <div class="col" style="background:green;">
        col3
      </div>
      <div class="col" style="background:blue;">
        col4
      </div> 
    </div>
</body>
</html>

全屏布局

  1. 绝对定位实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    html,body,parent{
      height:100%;
      overflow:hidden;
      } 
    .top{
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:100px;
      background:red;
      } 
    .left{
      position:absolute;
      top:100px;
      left:0;
      bottom:50px;
      width:200px;
      background:blue;
      } 
    .right{
      position:absolute;
      overflow:auto;
      left:200px;
      right:0;
      top:100px;
      bottom:50px;
      background:yellow;
      } 
    .bottom{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:50px;
      background:black;
      }
  </style>
</head>
<body>
    <div class="parent">
      <div class="top">top</div>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="bottom">bottom</div>
    </div>
</body>
</html>
  1. flex实现
<!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>
    * {
      margin:0;
      padding:0;
    }
    .parent{
      display:flex;
      flex-direction:column;
      } 
    .top{
      height:100px;
    } 
    .bottom{
      height:50px;
      } 
    .middle{
      flex:1;
      display:flex;
      }
    .left{
      width:200px;
      } 
    .right{
      flex:1;
      overflow:auto;
      }
  </style>
</head>
<body>
    <div class="parent">
      <div class="top">top</div>
      <div class="middle">
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
      <div class="bottom">bottom</div>
    </div>
</body>
</html>

小结一下

跟着原作者一步一步做了这些布局，发现布局的方法就是那几种，只要真正领会他们到底是怎么回事，实现各种复杂布局并非难事。最后，在此向愿创者表示感谢，您的总结让我了解到了一些个以前不知道的东西。





以上是关于CSS布局技巧大全的主要内容，如果未能解决你的问题，请参考以下文章

css 兼容大全

CSS hack技巧大全

21个超实用的 CSS 技巧分享（附图示）

黑马程序员前端-CSS常见布局技巧+案例

2018-05-22 CSS 左右布局左中右布局以及一些小技巧

学无止境的CSS(xHTML+CSS技巧教程资源大全)