首页 新闻 搜索 专区 学院

为什么js的marginTop参考对象不是父元素

0
悬赏园豆:30 [待解决问题]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
#parent
{
  width:200px;
  height:200px;
  background-color:red;
}
#children
{
  width:60px;
  height:60px;
  background-color:green;
  margin:0px auto;
}
</style>
</head>
<body>
<div id="parent">
  <div id="children"></div>
</div>
<script type="text/javascript">
  document.getElementById("children").style.marginTop="60px";
</script>
</body>
</html>

为什么children的margintop参考对象不是父元素,而是窗口

一落叶而知秋的主页 一落叶而知秋 | 初学一级 | 园豆:79
提问于:2013-03-20 17:40
< >
分享
所有回答(4)
0

我简单测试了一下,发现margintop的参考对象依然是父元素。

如果children不是parent里面的第一元素,那么效果是预期的。例如:

<div id="parent">
        <h1>Hello World</h1>
        <div id="children"></div>
    </div>

原因求CSS达人解答。

写代码的小2B | 园豆:4355 (老鸟四级) | 2013-03-20 18:04
0

本例中,如果children是parent的唯一元素,而且parent也是body的唯一元素,那么参照父元素其实等于参照body,不是吗

陈希章 | 园豆:2338 (老鸟四级) | 2013-03-20 18:54

您老能否再说的清楚一点,可能我对CSS的理解有所偏差。

子元素的margint-top属性的参考对象不是它的父元素吗

支持(0) 反对(0) 一落叶而知秋 | 园豆:79 (初学一级) | 2013-03-20 19:03

@一落叶而知秋: 不好意思,这个回答有误,我会再研究一下这个问题

支持(0) 反对(0) 陈希章 | 园豆:2338 (老鸟四级) | 2013-03-20 19:25
0

这个是外边距合并问题

一落叶而知秋 | 园豆:79 (初学一级) | 2013-03-21 11:42
0

css中margin-top,margin-bottom有两种情况

1,如:

<div style="margin-bottom:20px;"></div><div style="margin-top:10px;"></div>

当div1的bottom与div2的top的margin都有定义样式时,取其中较大的一个,这里就只会间距为20px,而不会是30px.

2,如:

<div class="parent" style="margin-top:10px;"><div class="son" style="margin-top:20px;"></div></div>

此时parent的margin-top会显示为20px;

当两个父子div有相邻的外边距时,以其中一个较大的为实,所以这里显示的是parent上边距为20px,而parent 与son之间没有外边距。

这里还要注意,只有上下外边距有这个规则,左右是没有的。

small-joker | 园豆:144 (初学一级) | 2013-04-01 11:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册