为了账号安全,请及时绑定邮箱和手机立即绑定
  • 绝对定位与自适应容器:

    https://img1.sycdn.imooc.com//5ba5c1b10001eb8f08810538.jpg

    查看全部
  • 图片居中定位与绝对定位:

    1,传统图片剧中方法:

          1),text-align;2),display:block,margin:0 auto;

          3),绝对定位,left:50%,margin-left:-50%(自身);

    2,text-allign加无依赖的绝对定位:

         图片父容器使用text-align:cente; 

         图片前放置  

         图片加上absolute后margin-left:-50%(自身);


    举一反三(更重要的是):

    实现以下网页角标,原理相同,改为text-alin:right;即可;

    传统方法:

    fixed:{left:50%;margin-left:计算;}

    缺点:不是自适应的

    https://img1.sycdn.imooc.com//5ba5a9ba000109d601490201.jpg

    查看全部
  • 下拉框与绝对定位:

    大众做法:

    1,父容器relative;下拉框absolute;

    2,无依赖的绝对定位:下拉ul在input前面(DOM结构),然后absolute,通过margin定位即可;

    优点:自适应强,应付各种变化环境

    https://img1.sycdn.imooc.com//5ba5a3930001043003770276.jpg

    查看全部
  • 图片覆盖与绝对定位:

    利用无依赖的绝对定位,轻松实现;

    优点:兼容性好,自适应,便于后期维护;

    https://img1.sycdn.imooc.com//5ba5a276000116f403890301.jpg

    查看全部
  • 独立的absolute,不加任何位置设定:

    1,位置跟随(脱离文档流后,悬浮其上,位置不变)


    作用:

    1,摆脱overflow的限制;

    2,去浮动;(有浮动的元素加absolute后会在无浮动的位置定位);


    其中IE7的绝对定位,会使元素inline-block化,再套一层div,即可与高级浏览器相同效果

    https://img1.sycdn.imooc.com//5ba59d4d0001995b06040254.jpg

    https://img1.sycdn.imooc.com//5ba59d600001315210140287.jpg

    查看全部
  • absolute和float相同的特性表现:

    1,容器absolut后,具有包裹性;

    2,内容absolute后,具有破坏性;

    查看全部
    0 采集 收起 来源:absolute和float

    2018-09-22

  • 内容区域想象成body

    .content {	position: absolute;	top: 48px;	bottom: 52px;	left: 250px;	overflow: auto; }

    此时的头部尾部一级侧边栏都是fixed效果,不跟随滚动,避免了移动端position:fixed实现的诸多问题。

    查看全部
  • width/height与left/top/right/bottom同时存在,会怎样?

    width/height设置的尺寸大于left/top/right/bottom拉伸的尺寸

    查看全部
  • z-index无依赖

    1、如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素;

    2、如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,然后无z-index;

    3、如果多个绝对定位交错,非常非常少见,z-inde:1控制;

    4、如果非弹框类的绝对定位元素z-index>2,必定z-inde冗余,请优化!

    查看全部
  • 1、图片图标来覆盖,无依赖、真不赖;

    2、如何定位下拉框,最佳实践来分享

    3、对齐居中或边缘,定位实现有脸面;

    4、星号时有没有,破坏队形不用愁;

    5、图文对其兼容差,绝对定位来开挂;

    6、文字益处不够放,不值一提就小样!

    查看全部
  • 折翼天使特性表现

    1、去浮动

    2、位置跟随(inline元素用了原来同行还是同行,block原来是换行依然是换行)

    查看全部
  • 不受relative限制的absolute定位,行为表现上时不使用top/right/bottom/left任何一个属性或使用auto作为值!

    查看全部
  • relative和absolute是分离的对立的,绝对不是什么兄弟关系

    absolute越独立越强大

    查看全部
  • clear可以清除float的浮动

    relative可以限制绝对定位absolute

    查看全部
  • absoulute和float的相同特性表现

    1、包裹性

    2、破坏性

    查看全部
    0 采集 收起 来源:absolute和float

    2018-08-24

举报

0/150
提交
取消
课程须知
虽说是深入,实际更适合鲜肉小伙伴
老师告诉你能学到什么?
absolute基本特性的感性认知。absolute可能的理解误区纠正。absolute诸多高级技巧的应用实例。absolute在移动web布局中的大放异彩。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!