css布局-浮动,负margin,圣杯/双飞翼布局


1. 浮动 vs 负margin

对于相邻的两个浮动元素,如果因为空间不够导致第二个浮动元素下移,可以通过给第二个浮动元素设置margin-left: 负值 来让第二个元素上移,其中 负值 大于等于元素上移后和第一个元素重合的临界值

e.g:

三个浮动元素:



最后一个浮动元素使用了负边距:


范例演示

范例

水平等距排列

范例

<style>
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct{
    overflow:hidden;
    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;
}

</style>
<div class="ct">
  <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>

关键步骤是总体.ct>ul{ margin-left: -20px;}

3. 圣杯布局

  1. 是三列布局,两边固定宽度,中间自适应
  2. 中间内容元素在 dom 元素次序中优先位置

为何要dom元素放前?
重要的东西放前面,据说对SEO有好处.
对阅读代码有好处.

实现

按照注释编号,一行行实现观察效果 范例

<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>

缺点

.mian的最小宽度不能小于.aside的宽度


双飞翼布局

范例

 <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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92
  • 浮动 VS 负margin 对于相邻的两个浮动元素,如果因为空间不够导致第二个浮动元素下移,可以通过给第二个浮动元...
    DeeJay_Y阅读 551评论 0 1
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,100评论 0 1
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 968评论 0 2
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,251评论 0 6