求教我一个div下面嵌套了另一个div，当我设置子div的margin-top的值时，为啥父div也跟着变成
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求教我一个div下面嵌套了另一个div，当我设置子div的margin-top的值时，为啥父div也跟着变成相关的知识，希望对你有一定的参考价值。
和子div一样的margin-top的值。奇怪，怎么设置，可以使父div的magin-top的值为0.
参考技术A magin-top上外边距，你把其父div加上margin-top的值为0，如果不行还要设置高度height追问父div加上margin-top的值为0后也不行，父div设过高度的
追答发源码上来，看看。检查你设置的父中的margin-top的值是否生效。如果没有生效，是否和其它样式冲突，这种情况一般是冲突了。覆盖了你的设置。
追问
div的内容
这是css
td img display: block;body
margin-top: 0px;
你设置的是td标签，上面也有一个td标签原因。
追问什么意思？求大侠详细指教，分给你
追答尽量不要在table中在用div，你这里可以保留table 在td标签的添加css样式，把div标签去掉。更容易管理
来自：求助得到的回答 参考技术A 给你一个网址你自己看下。http://blog.csdn.net/duran1986/article/details/6930967
我很早以前碰到的一个问题了，改为padding-top:10px;就可以了。 参考技术B 给父div加一个border-top就行了 参考技术C 当父div没有设置属性的时候便随着子标签变化而变化 参考技术D 父div加边框
或者用父div的padding-top
.animate滚动嵌套div
我正在建立一个具有parallaxing嵌套divs的网站，我正在尝试将滚动设置为每个div的动画。我遇到的问题是大多数.animate scrollto我发现依赖于html，body这是我认为我有问题，因为滚动发生在父div与页面正文。我已经设置了一个小提琴，它给出了网站的基本轮廓，其中包含简单的锚标记，可以将您带到下一个嵌套的div / section。我试图动画每个人之间的滚动与跳到下一个锚。有人能指出我正确的方向吗？ Here is the fiddle link
<html>
<head>
<script>
function scrollToAnchor(group1) {
var aTag = $("a[name='" + group1 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group1").click(function() {
scrollToAnchor('#group2');
});
function scrollToAnchor(group2) {
var aTag = $("a[name='" + group2 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group2").click(function() {
scrollToAnchor('#group3');
});
function scrollToAnchor(group3) {
var aTag = $("a[name='" + group3 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group3").click(function() {
scrollToAnchor('#group4');
});
function scrollToAnchor(group4) {
var aTag = $("a[name='" + group4 + "']");
$('parent-container').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
$("#group4").click(function() {
scrollToAnchor('#group1');
});
</script>
</head>
<body>
<div id="parent-container" class="master-wrap"> // overflow:scroll, 100vh
<div id="group1" class="wrap"> //100vh
<h1>Some Title Here - box1</h1>
<p>some content here.</p>
<a href="#group2" class="next_button">↓</a>
</div>
<div id="group2" class="wrap"> //100vh
<h1>Some Title Here - box3</h1>
<p>some content here</p>
<a href="#group3" class="next_button">↓</a>
</div>
<div id="group3" class="wrap"> //100vh
<a href="#group4" class="next_button">↓</a>
<h1>Some Title Here - box3</h1>
<p>some content here</p>
</div>
<div id="group4" class="wrap"> //100vh
<h1>Some Title Here - box4</h1>
<p>some content here</p>
<a href="#group1" class="next_button">↑</a>
</div>
</div>
</body>
</html>
我会做一个更通用的解决方案，在这里您使用data属性来指示在单击元素时应该滚动到哪个元素。
例如，<div data-scroll-to="other-element">···</div>将滚动到id为other-element的元素。有关工作示例，请参阅以下内容：
$('[data-scroll-to]').on('click', function(event) {
var target = $("#" + $(event.target).data('scroll-to'))
var offset = target.offset().top
$('html, body').animate({
scrollTop: offset
}, 'slow')
}).box {
height: 200px;
background-color: rgb(200, 200, 200);
}
.box:nth-child(even) {
background-color: rgb(150, 150, 150);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" data-scroll-to="box2" class="box">
Box 1 > Box 2
</div>
<div id="box2" data-scroll-to="box3" class="box">
Box 2 > Box 3
</div>
<div id="box3" data-scroll-to="box1" class="box">
Box 3 > Box 1
</div>这解决了我的问题：
$( function () {
$( 'a[href*=#]:not([href=#])' ).click( function () {
if ( location.pathname.replace( /^//, '' ) == this.pathname.replace( /^//, '' ) && location.hostname == this.hostname ) {
var target = $( this.hash );
target = target.length ? target : $( '[name=' + this.hash.slice( 1 ) + ']' );
if ( target.length ) {
$( '.parallax' ).animate( {
scrollTop: $( '.parallax' ).scrollTop() + target.offset().top
}, 1500 );
return false;
}
}
} );
} );
以上是关于求教我一个div下面嵌套了另一个div，当我设置子div的margin-top的值时，为啥父div也跟着变成的主要内容，如果未能解决你的问题，请参考以下文章