2018正版葡京赌侠诗深远了然css之absolute

在慕课网上看到的张鑫旭大神的录像,做的笔记,以便日后翻看。

纯属定位与float

   1.相对定位和float有一样的特点,都有包裹性,和破坏性。

   2.absolute和relative
    尽管不把她们俩身处一块儿,absolute越独立越强大。
    relative和absolute是分开的,相持的,绝不是怎么样兄弟关系!
    独立的absolute可以解脱overflow的限量,无论是滚动依然隐藏
    <div class=”scroll”>
      <a href=”javascript:;” class=”close”
title=”关闭”></a>
      <img src=”mm1″ />
      <img src=”mm2″ />
     </div>
    当多个图片中度超越容器大小时,那里的a标签里面是明令禁止不动的。
  3.无依靠的absolute定位
   无依靠的意趣
    不受relative限制的absolute定位,行为表现上是不使用top/right/bottom/left任何一个性能或应用auto作为值!
    定位的行为表现
    1.退出文档流
    2.保持占位
  absolute特性表现
    1.去浮动
    2.义务跟随
  合作margin的精确定位
    1.援救负值定位
    2.超赞的包容性
  4.实例
    1.图形图标相对定位覆盖
    <a>求课<i class=”icon-hot”></i></a>
.icon-hot{position:absolute;width:28px;height:11px;margin:-6px 0 0
2x;background:url();}
    用margin负值和position实现。

    2.下拉框最佳实践
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    .ul{position:absolute;width:260px;margin:39px 0 0
-1px;padding-left:0;list-style-type:none;border:1px solid
#ccc;background-color:#fff;box-shadow:0px 1px 2px
#d5d7d8;font-size:12px;}
    3.居中以及边缘对齐一定
      <div>
         <img src=”loading.gif” class=”course-loading”
/>
      </div>
      div{text-align:center;}
      img{position:absolute;margin-left:-26px;}-26是图片自身宽度的一半
      那里之所以会居中显示是因为, 是个占位符,也是个字符。text-align是对这些空格起作用的。
    4.各个对齐溢出技术
      表单注册的时候的*可以考虑选拔position:absoluter完毕相对定位,margin-left:负值
      表单前边的图片可以动用position:absoluter完毕
      使用相对化定位后的溢出不会被截取,超出后不会被截取
      总括:无依靠相对定位为页面布局与重构提供了进一步宽广的选型新思路
    5.退出文档流
      回流与重绘,动画尽量成效唉绝对稳定元素上
      四个absolute时候按照后来居上的口径
z-index潜在误区,误区:相对定位元素都急需z-index控制层级,确定呈现的垂直地点。
      相对定位和z-index无依靠
        1.假设唯有一个相对元素定位元素,自然不需求z-index自动覆盖平日元素
        2.只要三个相对元素,控制DOM六的上下相继达到须要的遮盖效果,如故无z-index;
        3.比方三个相对定位交错,万分少见,z-index:1操纵
        4.即使非弹框类的相对定位元素z-index>2肯定z-index冗余,请优化
        6.绝对定点的left/right/top/bottom
          那几个属性都要同盟使用,双双配对的。假使设置了left:0;top:0;盒子就会放在窗口的左上角。
          当父容器有relative/absolute/fixed/sticky是纯属定位会依照父元平昔计量。
          当只设置一个性能的时候,它不得不在一个势头上起功能。
          当四个特性同时设置的时候,要是不设置宽高,会把容器拉开。设置了宽高后,优先left,top
        7.left/top/right/bottom与width/height
          完毕一个全屏自适应的50%粉粉色半晶莹剔透遮罩层。
          通常是
            .overlay{
                position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
            }
          别的的兑现方案:
            .overlay{
              position:absolute;
              left:0;
              top:0;
              right:0;
              bottom:0;
            }
         没有其余宽度,没有中度。完成宽高满屏效果
          首先,相互替代性
          很多情状下,absolute的膀子拉伸和width/height是可以相互替代的。
          position:absolute;left:0;top:0;width:50%;
          等同于
          position:absolute;left:0;top:0;right:50%;
          注意:爆裂拉伸特性IE7+援助

          差别所在-拉伸更强劲
            已毕一个相距左侧200像素的全屏自适应的容器层。
            使用拉伸直接:
            position:absolute;left:0;right:200px;
            但是,width只能使用CSS3 calc统计
            position:absolute;left:0;width:calc(100%-200px);
          互相协理性
            1.容器无需固定width/height值,内部因素亦可拉伸;
          完成遮罩层
            2.容器拉伸,内部因素援救百分比width/height值。
              平时情形元素百分比height要回溯效用,要求父容器的height值不是auto
              绝对定位拉伸下,就算父级容器的height值是auto,只要容器相对定位拉伸形成,百分比中度值也是支撑的。
              中度自适应布局:
              .page{
                position:absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
              }
              .list{
                float:left;
                height:33.3%;
                width:33.3%;
                position:relative;
              }
            当left:0;right:0;width:50%时,的骨子里增幅是50%而不是100%
        合作性。
        当尺寸限制,拉伸以及margin:auto同时现身的时候,就会有相对定位元素的绝对化居中效果!
        8.absolute网页总体布局 适合运动web的布局策略
          与fixed,relative一样,absolute设计的初衷确实是稳定。
          与fixed,relative不相同的是,absolute包蕴更加多特有且强大的表征。如若一味是接纳其促成部分蒙面与稳定,则大材小用了。

        absolute与共同体布局
          1.body贬职,子元素升级
            升级的子div类名.page{position:absolute;left:0;top:0;right:0;bottom:0}
            相对定位受限于父级,由此
            html,body{height:100%}才能起效率
          2.各模块-头尾,侧边栏各居其位
            header,footer{position:absolute;left:0;right:0;}
            header{height:48px;top:0;}
            footer{heigth:52px;bottom:0;}

            aside{width:250px;position:absolute;left:0;top:0;bottom:0;}
          3.内容区域想象成body
            .content{
              position:absolute;
              top:48px;
              bottom:52px;
              left:250px;
              overflow:auto;
            }
          此时的头顶头部以及侧边栏都是fixed效果,不跟随滚动,防止了运动端position:fixed已毕的累累问题。

相关文章