zoukankan      html  css  js  c++  java
  • div+css布局漫谈

    1.CSS布局常用的方法:
    float : none | left | right

    取值:
    none : 默认值。对象不飘浮
    left : 文本流向对象的右边
    right : 文本流向对象的左边

    它是怎样工作的,看个一行两列的例子

    xhtml:

    <div id="warp">
     <div id="column1">这里是第一列</div>
     <div id="column2">这里是第二列</div>
     <div class="clear"></div>
    </div>

    CSS:

    #wrap{ 100%; height:auto;}
    #column1{ float:left; 40%;}
    #column2{ float:right; 60%;}
    .clear{ clear:both;}

    position : static | absolute | fixed | relative

    取值:

    static : 默认值。无特殊定位,对象遵循HTML定位规则
    absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义
    fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
    relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

    它来实现一行两列的例子

    xhtml:

    <div id="warp">
     <div id="column1">这里是第一列</div>
     <div id="column2">这里是第二列</div>
    </div>

    CSS:

    #wrap{ position:relative;/*相对定位*/770px;}
    #column1{ position:absolute; top:0; left:0; 300px;}
    #column2{position:absolute; top:0; right:0; 470px;}

    他们的区别在哪?

    显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!

    2.CSS常用布局实例

    一列
    单行一列

    body { margin: 0px;   padding: 0px;  text-align: center;  }
    #content {  margin-left:auto;  margin-right:auto;  400px;  370px; }

    两行一列

    body {  margin: 0px;   padding: 0px;   text-align: center;}
    #content-top { margin-left:auto;   margin-right:auto; 400px;  370px;}
    #content-end {margin-left:auto; margin-right:auto;  400px;   370px;}

    三行一列

    body {  margin: 0px; padding: 0px;  text-align: center;  }
    #content-top {  margin-left:auto;  margin-right:auto;  400px;   370px;  }
    #content-mid { margin-left:auto; margin-right:auto;  400px;  370px; }
    #content-end { margin-left:auto; margin-right:auto; 400px;  370px; }

    两列
    单行两列

    #bodycenter { 700px;margin-right: auto; margin-left: auto;overflow: auto;  }
    #bodycenter #dv1 {float: left; 280px;}
    #bodycenter #dv2 {float: right; 410px;}

    两行两列

    #header{    700px; margin-right: auto;margin-left: auto; overflow: auto;}
    #bodycenter { 700px; margin-right: auto; margin-left: auto; overflow: auto; }
    #bodycenter #dv1 { float: left; 280px;}
    #bodycenter #dv2 { float: right; 410px;}

    三行两列

    #header{    700px;margin-right: auto; margin-left: auto;  }
    #bodycenter { 700px; margin-right: auto; margin-left: auto;  }
    #bodycenter #dv1 {  float: left; 280px;}
    #bodycenter #dv2 { float: right;  410px;}
    #footer{     700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }

    三列
    单行三列
    绝对定位

    #left { position: absolute; top: 0px;  left: 0px; 120px;  }
    #middle {margin: 20px 190px 20px 190px; }
    #right {position: absolute;top: 0px; right: 0px;  120px;}

    float定位

    xhtml:

    <div id="warp">
     <div id="column">
     <div id="column1">这里是第一列</div>
     <div id="column2">这里是第二列</div>
     <div class="clear"></div>
     </div>
     <div id="column3">这里是第三列</div>
     <div class="clear"></div>
    </div>

    CSS:

    #wrap{ 100%; height:auto;}
    #column{ float:left; 60%;}
    #column1{ float:left; 30%;}
    #column2{ float:right; 30%;}
    #column3{ float:right; 40%;}
    .clear{ clear:both;}

    float定位二

    xhtml:

     <div id="center" class="column">
      <h1>This is the main content.</h1>
     </div>
     <div id="left" class="column">
      <h2>This is the left sidebar.</h2>
     </div>
     <div id="right" class="column">
      <h2>This is the right sidebar.</h2>
     </div>

    CSS:

    body {margin: 0;padding-left: 200px;padding-right: 190px;min- 240px;}
    .column {position: relative;float: left;}
    #center { 100%;}
    #left { 180px; right: 240px;margin-left: -100%;}
    #right { 130px;margin-right: -100%;}

    两行三列

    xhtml:

    <div id="header">这里是顶行</div>
    <div id="warp">
     <div id="column">
     <div id="column1">这里是第一列</div>
     <div id="column2">这里是第二列</div>
     <div class="clear"></div>
     </div>
     <div id="column3">这里是第三列</div>
     <div class="clear"></div>
    </div>

    CSS:

    #header{100%; height:auto;}
    #wrap{ 100%; height:auto;}
    #column{ float:left; 60%;}
    #column1{ float:left; 30%;}
    #column2{ float:right; 30%;}
    #column3{ float:right; 40%;}
    .clear{ clear:both;}

    三行三列

    xhtml:

    <div id="header">这里是顶行</div>
    <div id="warp">
     <div id="column">
     <div id="column1">这里是第一列</div>
     <div id="column2">这里是第二列</div>
     <div class="clear"></div>
     </div>
     <div id="column3">这里是第三列</div>
     <div class="clear"></div>
    </div>
    <div id="footer">这里是底部一行</div>

    CSS:

    #header{100%; height:auto;}
    #wrap{ 100%; height:auto;}
    #column{ float:left; 60%;}
    #column1{ float:left; 30%;}
    #column2{ float:right; 30%;}
    #column3{ float:right; 40%;}
    .clear{ clear:both;}
    #footer{100%; height:auto;}

    PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置margin,padding,boeder等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼容问题,会让你头疼,而且产生一系列CSS代码,我觉得这样的效率和效果都不好!

  • 相关阅读:
    PAT 甲级 1132 Cut Integer (20 分)
    AcWing 7.混合背包问题
    AcWing 9. 分组背包问题
    AcWing 5. 多重背包问题 II
    AcWing 3. 完全背包问题
    AcWing 4. 多重背包问题
    AcWing 2. 01背包问题
    AcWing 875. 快速幂
    AcWing 874. 筛法求欧拉函数
    AcWing 873. 欧拉函数
  • 原文地址:https://www.cnblogs.com/wucf2004/p/579328.html
Copyright © 2011-2022 走看看