css常用布局

bamboo

发布于 2019-01-29 16:07:35

1.2K0

发布于 2019-01-29 16:07:35

文章被收录于专栏：bamboo前端学习记录

一、单列布局

单列布局长这个样子，主要有两种：普通单栏，通栏的单栏布局

1、普通单栏

比较简单，设置定宽 + 水平居中即可

<style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div id="header"  class="layout">头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>

执行结果链接描述浏览器宽度超过960px时，外margin出现。

当收缩浏览器宽度，小于960px时，margin为0，出现滚动条。

2、通栏

<style>
.layout{
  width:600px;
  border:1px solid black;
  margin:0 auto;
}

.header{
  background:#ccc;
  height:60px;
}
.content{
   background:yellow;
   height:160px;
 
}
.footer{
  background:pink;
   height:60px;
}
</style>
<div class="header">
<div class="layout">header</div>
</div>
<div class="content  layout" > content</div>
<div class="footer">
<div class="layout">footer</div>
</div>

执行结果链接描述在header 和footer上再包裹一层div，在外层的div上添加背景颜色，设置内层layout上设置左右margin：auto，就出现了通栏的效果。实际上layout占据的位置是固定的，如下图border框出的位置。

当浏览器宽度收缩的时候，也会出现滚动条。

二、双列布局

一列固定宽度，另外一列自适应宽度。通过float+margin实现

  #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  </style>
  <div id="content">
    <div class="aside">aside</div> 
    <!-- 最重要的是执行顺序，要先放aside，再写content。因为content是普通的块级元素，如果先执行content，就会占据一整行，aside就只能向下浮动。如果先执行aside，由于有左margin，就正好可以放的下-->
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

执行结果链接描述 1、最重要布局的时候浮动元素要放在前面，要先放aside，再写content。因为content是普通的块级元素，如果先执行content，就会占据一整行，aside就只能向下浮动。如果先执行aside，由于有左margin，就正好可以放的下 2、注意使用后清除浮动

三、三列布局

两侧两列固定宽度，中间列自适应宽度。通过设置aside 左右float+左右margin实现

<style>
  .aside{
    background:yellow;
    float:left;
    height:400px;
    width:100px;
  }
   .aside2{
    background:blue;
    float:right;
    height:400px;
    width:100px;
  }
  .main{
   background:pink;
   margin:0 110px 0 110px;
    height:300px;
  }
  .footer{
   background:#ccc;
  }
  .clearfix::after{
    content:'';
    display:block;
    clear:both;
  }
</style>
   <div class="content  clearfix">
  <div class="aside">aside</div>
     <div class="aside2">aside2</div>
  <div class="main">main</div>
   </div>
  <div class="footer">footer</div>

执行结果：链接描述

四、水平等距排列

<style>
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct{
   
    width: 640px;
    border:dashed 1px orange;
    margin: 0 auto;
}

.ct .item{
    float:left;
    margin-left: 20px;
    margin-top: 20px;
    width:200px;
    height:200px;
    background: red;
}
.ct>ul{
  margin-left: -20px; //最重要的是负margin是在ul上设置
}
 .clearfix::after{
   content:" ";
   display:block;
   clear:both;
 }

</style>
<div class="ct  clearfix">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul>
</div>
</div>

执行结果链接描述左右没有margin

五、flex布局

关于flex这三篇文章，写得比较好 Flex 布局教程：实例篇 Flex 布局教程：语法篇深入理解 flex-grow & flex-shrink & flex-basis

六、圣杯布局

1、起因

三列布局中，一般两边是广告，中间是实际内容。要求中间内容元素在 dom 元素次序中处于优先位置。所以普通的三栏布局就用不了，必须要用更复杂的方式来实现。

2、原理（浮动+负margin+绝对定位）

1、给main，aside，extra都设置为浮动，main设置宽度为100%
2、设置aside负margin-left为100%（相当于向左移动一个父元素的宽度），将aside移动到main的左边
3、设置extra负margin-left为150px（extra的宽度），将extra移动到main的右边
4、为了避免main的内容被extra和aside遮挡。给content设置左padding为100px，右padding为150px，给extra和aside腾出位置
5、最后使用position：relative，将extra和aside分别移动到两边

3、遇到的坑

设置负margin和width为百分比，计算的基数都是父元素的宽度负margin使用较难掌握，使用前可以看一下这篇负margin的原理的文章

  <style>
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
      padding-left: 100px;  /*5*/
      padding-right: 150px; /*5*/
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }

    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/

      margin-left: -100%;  /*4*/
      position: relative;  /*6*/
      left: -100px;        /*6*/
    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/

      margin-left: -150px; /*5*/
      position: relative;  /*7*/
      left: 150px;         /*7*/

    }
    .main{
      height: 350px;       /*1*/
      background: blue;    /*1*/

      width: 100%;         /*3*/
    }

  </style>

  <div id="content">
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

执行结果链接描述

七、双飞翼布局（浮动+左右margin+负margin）

demo 原理：双飞翼的布局和圣杯是很相似的，不同的是双飞翼在main内部再嵌套了一层wrap。用wrap设置左右margin，代替content设置padding和绝对定位。

<style>

    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{

    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }

    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/

      margin-left: -100%;  /*4*/

    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/

      margin-left: -150px; /*5*/


    }
    .main{
      /* background: blue;  */   /*第1步添加，第7步注释掉*/
      /* height: 350px;  */      /*第1步添加，第7步注释掉*/

      width: 100%;         /*3*/
    }

    .wrap{
      margin-left: 100px;  /*6*/
      margin-right: 150px; /*6*/
      background: blue;    /*7*/
      height: 350px;       /*7*/

    }

  </style>

  <div id="content">
    <div class="main">
      <div class="wrap">main</div>
    </div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

执行结果

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-11-14，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度