江苏龙网

  1. 首页 > 生活 > >

理解不了一段前端代码，已被冥思苦想一通宵，求帮助啊(┬＿┬)

捉急。viewport、html element、body element，它们完全不是同一个东西。position:fixed 元素的 containing block 是根据 viewport 计算的。position:absolute 元素如果没有一个 position 非 static 的祖先元素，那么它的 containing block 也是根据 viewport 计算的。viewport、html、body，它们的大小不一定对应的。http://codepen.io/OpenGG/pen/XdVVpd
■网友
你没有reset吧.. *{padding:0;margin:0}
■网友
确实没看懂题主想表达什么，不过我看出了题主的几个疑问点，我简单回答一下：1、chrome默认的盒模型中margin是不计算在元素的宽度当中的，所以元素内部的left偏移计算量都不会计算外边距的，因此无需考虑；2、你发现的div加了外边距结果与body重合的问题，这个我忘了是属于兼容问题还是bug来着，当元素内部紧邻的元素，他们的外边距会重合，也就是只有最大的外边距会生效，这是一个bug，可以通过在父元素加overflow:hidden;解决，具体发生情景及解决办法搜一下“外边距重合”；3、body元素即指浏览器窗口我觉得是有问题的，html还差不多，不要纠结浏览器窗口这个东西，更不要以这个东西为定位的标准，定位就是以某个元素为基准的；4、至于你发现相对定位和绝对顶位有偏差的问题，你发现的没错，确实差了一个外边距，但这个差距其实是在此种情况下的巧合，说明你对绝对定位和相对定位还没有真正的理解。通俗的讲解一下，相对定位是根据元素当前的位置进行偏移的，绝对定位会使元素脱离文档流，按照冒泡顺序，依次寻找祖先元素中第一个有position属性的元素作为基准进行偏移，如果没找到就会以html元素为基准偏移。所以你发现相对位移的位移量是以body的内部（不包含margin）的位置开始计算，而绝对定位就是以html为基准偏移，body和html差了body的margin的距离，因此就造成了相对、绝对的差距。我这么说并不是标准的说法，但意思是相同的，不知道你能理解不。如果说错还望指教。
■网友
你都知道body自带margin了写一个body{margin:0px}就搞定了


    推荐阅读


    上一篇：家人逼着学医，可我想做电商 ，家人不同意咋办

    下一篇：如果做垂直区域性的专车服务平台怎样才能抵挡住UBER、滴滴、神州、一号专车等全国性平台的竞争