设置了position后 margin 失效

随笔3个月前发布 郭思兰
37 0 0

1. 设置了position后为什么margin:auto没用

原因1:因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。所以margin这个时候不会起作用滴,需要用left, right, bottom,top来进行精确定位了
原因2:该元素没有设置宽高,margin:auto是根据宽高来自适应调整的

  • 绝对定位 浮动 fixed都脱离文档流. 使用 marge 无效;
  • 相对定位是占位置的,不脱离文档流。既然不脱离文档流, 就说明使用 marge 0 auto 有效;
  • 元素设置fixed后,脱离文档流,设置weight:“100%”,不能实现与父元素一样大小,而是以浏览器为参照。

2. 另外在开发过程中 absolute(绝对定位) 和 fixed 的元素位置上的区别:

  • absolute: 设置完后,top是在系统导航下面的位置的;
  • fixed: 它的参考物是浏览器,所以在设置完后, 标签会延伸到导航的底部,以窗口的上边缘为起始位置;
© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...