• CSS(四)定位布局


    全文手打,转载请注明出处

    全文手打,转载请注明出处

    全文手打,转载请注明出处

    一)定位

    定位position:设定元素在文档中的位置,会将标签(元素)转换为块级

    定位分类:

    static:静态定位(默认值,没有定位,不能设置偏移值left/top/right/bottom,占用标准流/文档流)

    relative:相对定位(占用标准流/文档流,它会出现在文档流中它该出现的位置,可以通过设置偏移值改变其位置)相对定位是父级

    absolute:绝对定位(脱离文档流,相对于body做偏移)绝对定位与相对定位结合使用,相对的是relative定义的元素做偏移,绝对定位是子级

    fixed:固定定位(脱离文档流,相对于浏览器窗口左上角做偏移),一般在开发中用来固定导航栏

    .wrapper{
      width: 600px;
      height: 400px;
      border:1px soild #888;
      margin: 0 auto;
    }
    .box1,.box2,.box3{
      width: 150px;
      height: 150px;
      border:1px dotted red;
      display: inline-block;
    }
    .box2{
      //position: static;    //设置为static,不识别left,top
      position: relative;     //可以,相对于原来的占位做偏移
      position: absolute;      //脱离文档流,相对于body进行偏移
      position: fixed;
    left
    : 100px; top: 200px; } <div class="wrapper"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>

    二)z-index调整显示顺序

    当多个元素添加绝对定位,元素会叠加在一起,使用z-index可以设置元素显示的层次,用在static和relative元素上是无效的

    文档流默认的z-index值为0

    .box1,.box2,.box3{
      position: absolute;        //绝对定位
    }
    
    .box1{
      z-index: 3;
    }
    .box2{
      z-index: 2;
    }
    .box3{
      z-index: 1;
    }                                //重叠顺序,box1最上面

    网站开发策略:先整体再局部,自顶向下,逐步细化

    三)双飞翼布局:三列组成,两端固定,中间自适应

    .container{
      width: 100%;
    }
    .column{
      float:left;
      height: 200px;
    }
    .left{
      width: 300px;
      background-color: red;
      margin-left: -100%;
    }
    .center{
      width: 100%;
      background-color: red;
    }
    .right{
      width: 300px;
      background-color: red;
      margin-left: -300px;
    }
    
    <div class="container">
      <div class="column center"></div>
      <div class="column left"></div>
      <div class="column right"></div>
    </div>

    四)圣杯布局:三列组成,两端固定,中间自适应(外观和双飞翼一样)

    五)两栏布局,左宽度固定,右自定义

    .container{
      width: 100%;
      overflow: hidden;         //清除浮动
    }
    .left{
      width: 150px;
      height: 200px;            //实际开发不要给高度,高度由内容自行撑开
      float: left;
      background-color: #999;
      margin-right: -150px;     //让left向左挪150px,把right挪到同一行
      position: relative;       //让left占自己原来的位置,挡住部分right内容
    }
    .right{
      width: 100%;
      height: 200px;            //实际开发不要给高度,高度由内容自行撑开
      float: left;
      background-color: #090;
      margin-left: 150px;       //把right左侧空出来left的宽度
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>

    六)两栏布局,右宽度固定,左自定义

    .container{
      width: 100%;
      overflow: hidden;    //清除浮动
    }
    .left{
      width: 100%;
      height: 200px;   
      float: left;
      background-color: #090;
    }
    .right{
      width: 150px;
      height: 200px;
      float: left;
      background-color: #999;
      margin-left: -150px;    
    }
    
    
    <div class="container">
      <div class="left">左侧自适应</div>
      <div class="right">右侧固定</div>
    </div>

    七)两栏布局,左右都固定

    .container{
      width: 100%;
      overflow: hidden;    //清除浮动
    }
    .left{
      width: 1000px;
      height: 200px;   
      float: left;
      background-color: #090;
    }
    .right{
      width: 780px;
      height: 200px;
      float: right;
      background-color: #999;
      margin-left: -150px;    
    }
    
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧固定</div>
    </div>

    八)三栏布局,左、右固定,中间自适应

    .container{
      width: 100%;
      overflow: hidden;    //清除浮动
    }
    .left,.right{
      width: 200px;
      height: 200px;   
      line-height: 200px;    //line-height:行高,,文字底部到上一行文字底部的距
      float: left;
      background-color: #090;
      position: relative;
    }
    .left{
      margin-right: -200px;
    }
    .right{
      margin-left: -200px;
    }
    .center{
      width: 100%;
      height: 200px;   
      float: left;
      background-color: #999;
    }
    .content{
      margin: 0 200px;
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="center">
          <div class="content">中间自适应</div>
      </div>
      <div class="right">右侧固定</div>
    </div>

    九)三栏布局,中间、右固定,左自适应(自己发挥吧,你可以的)

    十)三栏布局,左、中间固定,右自适应(自己发挥吧,你可以的)

  • 相关阅读:
    文件进阶
    文件及文件操作
    字符编码
    集合
    数据类型之字典
    数据类型之列表,元组
    数据类型之数字,字符串
    for 循环语句
    while 循环语句
    深浅拷贝
  • 原文地址:https://www.cnblogs.com/goule/p/13634131.html
Copyright © 2020-2023  润新知