css属性 overflow:hidden; 的用法?

//没加 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>
温馨提示:内容为网友见解,仅供参考
第1个回答  2016-06-22
overflow: hidden 隐藏溢出 当然还有很多用法 还可以清除浮动

之前没加overflow: hidden的时候 是因为出现了maegin外边框合并的问题而设置了overflow属性的元素和它的子元素之间的margin不会被折叠这样就会发生图2的结果。
(外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。)

当然如果你想解决这种问题你可可以使用display:inline-block 效果是一样的追问

谢谢,你的回答也非常精彩

第2个回答  2020-12-17

Vue实践-CSS样式position/display/float属性对比使用

CSS 的overflow:hidden 属性详细解释
1、首先我们写一个div,div里就是一段文字。2、然后写一些css样式,关键部分是指定div的宽度,如图的样式代码 3、刷新页面,可以看到我们的文字在超长的时候,显示在div的外面了。4、这时就要用到我们的overflow:hidden样式了。该样式就是为了避免超长时,显示内容溢出的,在样式里添加上这个。5、再次刷...

overflow:hidden;的属性是什么?最好有个例子
overflow: hidden;的属性是CSS中的溢出处理属性。该属性用于控制当元素内容溢出其块级容器时的行为。具体来说,当设置了`overflow: hidden;`后,溢出的内容会被隐藏,不会显示在页面上。这对于防止页面内容溢出、保持布局整洁非常有用。同时,该属性还有三个附加的子属性:`overflow-x`、`overflow-y`和...

overflow:hidden什么意思
“overflow:hidden”是一种CSS样式属性,用于控制元素的溢出内容的显示方式。它的作用是隐藏元素中超出容器边界的内容,使其在页面上不可见。下面将详细介绍“overflow:hidden”的含义和用法。“overflow:hidden”的含义“overflow:hidden”是CSS中的一个属性,用于指定元素在内容溢出时的处理方式。具体来说,...

overflow:hidden用在哪里?
CSS中,overflow:hidden的作用是隐藏溢出 比如: 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏。

overflow:hidden作用
overflow:hidden的作用是控制内容溢出。详细解释:1. 防止内容溢出容器。 当一个元素的内容超出其设定的容器边界时,如果没有设置合适的溢出处理机制,这些内容就会溢出到容器外部,影响页面布局。而设置overflow属性为hidden,就能够防止这种溢出发生。2. 控制页面布局。 通过设置overflow:hidden,开发者可以...

overflow:hidden作用
CSS中overflow:hidden的作用是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏。具体应用如下:①隐藏溢出的部分。比如一个父块级元素里面包含了子块级元素,当子块级元素的高度超过父块级元素的高时,超部分就会隐藏。②清除浮动。它的功能和clear:both是一个作用,父元素中加了overflow:...

css属性 overflow:hidden; 的用法?
首先。你要理解overflow:hidden的意思是什么。这个应该你会理解。也就是给一个盒子定义了一个显示范围。内部的物体。只有在这个范围内部才会被显示。不然就被隐藏。其实你这个的问题。是margin的基本问题。margin的top值在没有hidden的时候。是显示到了红色区域的外面去了。算是bug吧。在定义了hidden后。

overflow:hidden用在哪里?
overflow:hidden用在哪里? CSS中,overflow:hidden的作用是隐藏溢位 比如: 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏。at on in用在哪里 在具体的时间 at three o'clock ;跟地点也用at 比如 at home 星期几用on 比如 on Sunday 年份用in 比如 in 1947...

html\/css中的overflow:hidden到底是什么用处??
超出之后隐藏,有一个div,高度和宽度都是100像素,当里面的内容很多,div里撑不下时,如果设置overflow:hidden,就会把超出的内容隐藏掉不显示。操作方法如下:1、首先,html页面结构如图,有几个column,每个column里有几行方格,每个方格里有文字。文字可能过长,超出单元格大小。2、首先禁止文字折行...

overflow:hidden
CSS中的overflow:hidden属性在元素内容溢出时起到隐藏多余部分的作用,其主要应用包括隐藏溢出部分和清除浮动。当一个父元素包含一个子元素,子元素高度超过父元素时,超出部分会被隐藏。此外,overflow:hidden与clear:both有相似功能,能够清除父元素中浮动子元素的影响。CSS提供了丰富的样式定义能力,如设置...

相似回答