CSS 基础布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 980px;
      margin: 0 auto;
    }

    .header {
      height: 150px;
      background-color: orange;
    }

    .footer {
      height: 150px;
      background-color: yellow;
    }

    .content {
      height: 300px;
      background-color: green;
    }

    .content .left {
      height: 300px;
      background-color: aquamarine;
      float: left;
      width: 20%;
    }

    .content .right {
      height: 300px;
      background-color: coral;
      float: right;
      width: 10%;
    }

    .middle {
      height: 300px;
      background-color: red;
    }

    .fx {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="con">
    <div class="header">
      我是header
    </div>
    <div class="content">
      <!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来  这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
      <div class="middle">
        中间
      </div>
      <div class="left"></div>
      <div class="right"></div>

      <div class="fx"></div>
    </div>
    <div class="footer">
      版权信息
    </div>
  </div>
</body>

</html>

在浏览器中展现的效果,上面将 .content 的高度设置为了 300px 才会出现下面这样的情况

圣杯布局

照着上面的基础布局的基础上进行代码的修改

  • .middle{float:left;width:100%;}
  • .left{width:100px;margin-left:-100%;}
  • .right{float:left;width:150px;margin-left:-150px;}
  • 再给容器 .content 加了 padding-left:100px;padding-right:150px;
  • .left{position:relative;left:-100px;}
  • .right{position:relative;left:150px;}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 980px;
      margin: 0 auto;
    }

    .header {
      height: 150px;
      background-color: orange;
    }

    .footer {
      height: 150px;
      background-color: yellow;
    }

    .content {
      height: 300px;
      background-color: green;
      padding-left: 100px;
      padding-right: 150px;
    }

    .content .left {
      height: 300px;
      background-color: aquamarine;
      float: left;
      width: 100px;
      margin-left: -100%;
      position: relative;
      left: -100px;
    }

    .content .right {
      height: 300px;
      background-color: coral;
      float: left;
      width: 150px;
      margin-left: -150px;
      position: relative;
      left: 150px;
    }

    .middle {
      height: 300px;
      background-color: red;
      float: left;
      width: 100%;
    }

    .fx {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="con">
    <div class="header">
      我是header
    </div>
    <div class="content">
      <!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来  这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
      <div class="middle">
        中间
      </div>
      <div class="left"></div>
      <div class="right"></div>

      <div class="fx"></div>
    </div>
    <div class="footer">
      版权信息
    </div>
  </div>
</body>

</html>

在浏览器中的效果

双飞翼布局

双飞翼布局 = 圣杯布局 + inner div

  • .left.right 中的 position 属性全都去掉,将 .contentpadding 也都去掉
  • 之后再在 .middle 元素中增加一个 div.inner 元素
  • 给这个元素设置样式 .middle .inner{margin-left:100px;magin-right:150px;}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 980px;
      margin: 0 auto;
    }

    .header {
      height: 150px;
      background-color: orange;
    }

    .footer {
      height: 150px;
      background-color: yellow;
    }

    .content {
      height: 300px;
      background-color: green;
      /*padding-left: 100px;
            padding-right: 150px;*/
    }

    .content .left {
      height: 300px;
      background-color: aquamarine;
      float: left;
      width: 100px;
      margin-left: -100%;
      /*position: relative;
            left: -100px;*/
    }

    .content .right {
      height: 300px;
      background-color: coral;
      float: left;
      width: 150px;
      margin-left: -150px;
      /*position: relative;
            left: 150px;*/
    }

    .middle {
      height: 300px;
      background-color: red;
      float: left;
      width: 100%;
    }

    .middle .inner {
      margin-left: 100px;
      margin-right: 150px;
    }

    .fx {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="con">
    <div class="header">
      我是header
    </div>
    <div class="content">
      <!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来  这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
      <div class="middle">
        <div class="inner">
          中间
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>

      <div class="fx"></div>
    </div>
    <div class="footer">
      版权信息
    </div>
  </div>
</body>

</html>

扩展

参照上面的【双飞翼】布局的源码,如果说 .left .right .inner 这三个元素不设置固定的高度,就会出现下面的问题,这里我给 .inner 设置了一个背景颜色 blueviolet

接下来我们要实现的就是如何使三列布局可以等高

  • .left .right .inner 都加上两个样式 padding-bottom:9999px;margin-bottom:-9999px;
  • 再给 .content 加上 overflow:hidden;

上面的 padding 是增加了元素的高度,margin 是变相的将增加的高度给减去了,尽管在视觉上市一样的效果,这个 margin 是必须要加上的,这样值相互抵消使得元素也就是这个盒子模型中的内容还是在原来的位置上。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .con {
      width: 980px;
      margin: 0 auto;
    }

    .header {
      height: 150px;
      background-color: orange;
    }

    .footer {
      height: 150px;
      background-color: yellow;
    }

    .content {
      height: 300px;
      background-color: green;
      /*padding-left: 100px;
            padding-right: 150px;*/
      overflow: hidden;
    }

    .content .left {
      /*height: 300px;*/
      background-color: aquamarine;
      float: left;
      width: 100px;
      margin-left: -100%;
      /*position: relative;
            left: -100px;*/
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .content .right {
      /*height: 300px;*/
      background-color: coral;
      float: left;
      width: 150px;
      margin-left: -150px;
      /*position: relative;
            left: 150px;*/
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .middle {
      /*height: 300px;*/
      background-color: red;
      float: left;
      width: 100%;
    }

    .middle .inner {
      margin-left: 100px;
      margin-right: 150px;
      background-color: blueviolet;
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .fx {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="con">
    <div class="header">
      我是header
    </div>
    <div class="content">
      <!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来  这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
      <div class="middle">
        <div class="inner">
          中间
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>

      <div class="fx"></div>
    </div>
    <div class="footer">
      版权信息
    </div>
  </div>
</body>

</html>