css属性 overflow:hidden; 的用法？
//没加overflow:hidden;时，显示效果<body><divstyle="background:red;width:200px;height:200px;ma...
//没加 overflow:hidden;时，显示效果 <body> <div style="background: red; width: 200px; height: 200px; margin: 20px;"> <div style="background: yellow; width: 100px; height: 100px; margin: 30px;"></div> </div> </body>//加了 overflow:hidden;时，显示效果 <body> <div style="background: red; width: 200px; height: 200px; margin: 20px; overflow: hidden;"> <div style="background: yellow; width: 100px; height: 100px; margin: 30px;"></div> </div> </body>
展开
展开全部
首先。你要理解overflow:hidden的意思是什么。这个应该你会理解。
也就是给一个盒子定义了一个显示范围。内部的物体。只有在这个范围内部才会被显示。不然就被隐藏。
其实你这个的问题。是margin的基本问题。margin的top值在没有hidden的时候。是显示到了红色区域的外面去了。算是bug吧。在定义了hidden后。也就是吧显示范围限制了。他就将margin的top值的起始位置算到了红色区域里面。
希望对你有帮助。
另外。你可以尝试一下,如下结构两个div之间的距离是多少。我记得这个也是有问题的。
<div style="margin-bottom:20px">1</div>
<div style="margin-top:20px">2</div>
也就是给一个盒子定义了一个显示范围。内部的物体。只有在这个范围内部才会被显示。不然就被隐藏。
其实你这个的问题。是margin的基本问题。margin的top值在没有hidden的时候。是显示到了红色区域的外面去了。算是bug吧。在定义了hidden后。也就是吧显示范围限制了。他就将margin的top值的起始位置算到了红色区域里面。
希望对你有帮助。
另外。你可以尝试一下,如下结构两个div之间的距离是多少。我记得这个也是有问题的。
<div style="margin-bottom:20px">1</div>
<div style="margin-top:20px">2</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
overflow: hidden 隐藏溢出 当然还有很多用法 还可以清除浮动
之前没加overflow: hidden的时候 是因为出现了maegin外边框合并的问题而设置了overflow属性的元素和它的子元素之间的margin不会被折叠这样就会发生图2的结果。
（外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。）
当然如果你想解决这种问题你可可以使用display：inline-block 效果是一样的
之前没加overflow: hidden的时候 是因为出现了maegin外边框合并的问题而设置了overflow属性的元素和它的子元素之间的margin不会被折叠这样就会发生图2的结果。
（外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。）
当然如果你想解决这种问题你可可以使用display：inline-block 效果是一样的
追问
谢谢，你的回答也非常精彩
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
