|
写代码过程中，发现了设置margin-top为负值时，所有的元素都向上移动上（包括设置的浮动元素）
代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#mydiv{
background-color: green;
height: 40px;
color:white;
text-align: center;
line-height: 40px;
transition: all .3s linear;
}
.icon{
border:1px solid red;
float:right;
height: 40px;
margin-right: 20px;
line-height: 40px;
background-color: green;
padding: 0px 10px;
}
.show{
margin-top: 0px;
}
.hide{
margin-top: -50px;
}
</style>
</head>
<body>
<header>
<!--绿色长条-->
<div class="sk" id="mydiv">
点击切换实现隐藏
</div>
<div class="icon">
<img id="myImage" onclick="change()" src="img/close-16x16.png" alt="">
</div>
</header>
<script type="text/javascript">
function change(){
var div = document.getElementById("mydiv");
var img = document.getElementById("myImage");
var src =img.getAttribute("src");
if(src == "img/close-16x16.png"){
img.src="img/down-arr-16x16.png";
div.setAttribute("class","hide");
}else{
img.src="img/close-16x16.png";
div.setAttribute("class","show");
}
}
</script>
</body>
</html>原因：负边距在普通文档流中的作用 那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。 总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流。 负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。 解决方案： 让设置负边距的元素，脱离文档流。或者让受影响的元素不浮动，不脱离文档流 参考： https://blog.csdn.net/twoto3_/article/details/52250602 https://www.cnblogs.com/shcrk/p/9310834.html |
|
|
公众号
