1

absolute

absolute 和 float 关系

相同的特性表现:

  • 包裹性:上了属性之后,宽度不在铺满整行,像是变成了 inline-block

  • 破坏性:父级高度塌陷

不同的地方:

  • float 会脱离文档流,但是宽度会保持,文档流的对象会跟随

  • absolute 在没有top等定位属性的情况下,会悬在文档流之上,初始位置还在原来文档流的位置,只不过没了高度和宽度

absolute 和 relative

误区:设置 absolute 不用每次给父级加 relative

  • 无依赖,不受 relative 限制,可以不用 left/right/top/bottom 等

  • 三个图片并排,如果中间的一个设置成 absolute,那么,中间一个的位置不会变化,同时第三张图片会跑到第二张图片下面

  • absolute 脱离文档流无视父级的 overflow: hidden,relative 还在文档流中

配合 margin

  • 小 tips : html中标签非要挨着的话可以用<!-- -->连接两个标签

  • 利用 margin 把 absolute 用成相对定位

父级加上了 relative

  • 爆裂拉伸:left/right/top/bottom 全部为0 可以覆盖父级

  • 通常情况,如果父级没有高度,那么子级是不能用百分比的。

    但是!! absolute + left 可以

繁忙的耗子
167 声望1 粉丝

好记性不如烂笔头


下一篇 »
webpack 入门

引用和评论

0 条评论