div的top，bottom，left，right值，算不算父元素的margin部分？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div的top，bottom，left，right值，算不算父元素的margin部分？相关的知识，希望对你有一定的参考价值。

我发现当父元素css的position为static，而子元素的positon为absolute时，子元素的top，bottom，left，right包含父元素的margin部分。而当父元素的position不为static时，子元素的top，bottom，left，right这不包含父元素的margin部分。
请问，这其中有什么样的原理。谢谢。

楼主你好!
当父层position:static;的时候,里面子层是positon:absolute，这时top，bottom，left，right是相对于浏览器的
当父层position:relative;的时候里面子层是positon:absolute，这时top，bottom，left，right是相对于父层的，也就是说此时父元素的margin部分将会起作用;
我用了一段代码测试了一下，楼主请看:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.a1width:300px;height:300px; position:static;border:1px solid #ddd;margin-top:10px;margin-left:10px;

.a2width:300px;height:300px; position:relative;border:1px solid #ddd;margin-top:10px;margin-left:10px;
.b1width:200px;height:200px;left:50px;top:50px;bottom:50px;right:50px; position:absolute;background:#ccc;
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div class="a1">
<div class="b1"></div>
</div>

<div class="a2">
<div class="b1"></div>
</div>

</body>
</html>

参考资料：http://www.losever.com/?s=%E5%AE%9A%E4%BD%8D

 参考技术A 当父元素css的position为static，而子元素的positon为absolute时.

此时子元素无视直接父元素

getBoundingClientRect()方法

getBoundingClientRect 方法 有6个属性 top 、bottom、right、left、width和height
 
ie9以下浏览器只支持 getBoundingClientRect 方法的 top 、bottom、right、left属性；
ie9 和其它浏览器支持 getBoundingClientRect 方法 有6个属性 top 、bottom、right、left、width和height；
根据getBoundClientRect().width这个值来做字体的适配
(function () {
    var html = document.documentElement;

    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + \'px\';
    }
    window.addEventListener(\'resize\', onWindowResize);
    onWindowResize();
})();

　　

以上是关于div的top，bottom，left，right值，算不算父元素的margin部分？的主要内容，如果未能解决你的问题，请参考以下文章

Android Rect对象中的top，left，right和bottom是啥意思

设置 top=0,bottom=0,left=0,right=0 或 width=100% , height=100% 之间的区别是啥

C#中，tagRECT结构的成员top、right、left、bottom代表啥？

UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)

Unity-UGUI动态修改 RectTransform 的Left，Top，Right和Bottom值

css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？