css常用布局

一、单列布局

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

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>

执行结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券