CSS 溢出的属性

发布于 2024-12-03 06:55:11 字数 482 浏览 3 评论 0 原文

我有两个与 CSS 溢出属性相关的问题或者更确切地说需要澄清。据说

具有非可见溢出值的框将垂直扩展 包围所有浮动的后代框。

另外关于利润率,据说

对于具有溢出值的框,边距永远不会折叠 比可见的。

您能否用相同的实际用途来解释这两点。如果您可以包含任何示例来证明相同的内容,那就太好了。

我的演示;

http://jsfiddle.net/emeRJ/13/

http://jsfiddle.net/emeRJ/12/

I have 2 questions or rather clarifications I need related to CSS overflow property..It is said that

Boxes with an overflow value other than visible will expand vertically
to enclose any floated descendant boxes.

Also regarding margins, it is said that

Margins will never collapse for a box with an overflow value other
than visible.

Could you please explain these 2 points with any practical use of the same..It would be great if you could include any example to demonstrate the same.

My demos on this;

http://jsfiddle.net/emeRJ/13/

http://jsfiddle.net/emeRJ/12/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

海的爱人是光 2024-12-10 06:55:11

1)如果您有一个元素的溢出设置为与“可见”不同的值,则该元素的高度将根据内部的浮动元素进行扩展。

检查这个例子: http://jsfiddle.net/emeRJ/3/

因为我还没有定义盒子的高度,它将被里面的浮动块扩展。只是因为溢出不是“可见”..因此,如果将溢出设置为可见,则框将不会考虑浮动元素,并且框的高度将为0(在示例中,如果将溢出更改为可见,则将看不到灰色背景)

所以当同时使用溢出、浮动和高度(或宽度)时会有不同的行为。
Overflow 将告诉浏览器如何处理无法放入框中的内容(如果您已经定义了框的尺寸),Float 将把元素放在接下来的位置彼此尊重父元素的尺寸,高度和宽度将界定可见区域

[甚至更复杂]在示例中,当溢出可见时,如果添加 更清晰的元素内:
http://jsfiddle.net/emeRJ/4/

2)对于第二个,你应该真正阅读@feeela 给出的关于折叠边距的链接... =P

希望这有帮助

1) if you have an element that has overflow set to something different than "visible", the height of the element will be expand according to the float elements inside.

check this example: http://jsfiddle.net/emeRJ/3/

since i haven't defined the height for the box, it will be expanded by the floating blocks inside. Only because overflow is not "visible".. So if you set the overflow to visible, the box wont consider the floating elements and the height of the box will be 0 (in the example, if you change the overflow to visible you wont see the gray background)

So there are different behaviors when using overflow, float and height (or width) together.
Overflow will tell the browser what to do with the content that can't fit in the box (if you have defined the dimensions of the box), Float will put elements next to each other respecting the dimensions of the parent element, and height and width will delimit the visible area

[ even more complicated ] in the example, when the overflow to visible, you could still force the box to expand if you add a clearer element inside:
http://jsfiddle.net/emeRJ/4/

2) for the second, you should really read the link given by @feeela about collapsing margins... =P

Hope this helps

千仐 2024-12-10 06:55:11

溢出扩展

具有非可见溢出值的框将垂直扩展以包围任何浮动的后代框

清除浮动元素时,此属性非常有用。一个常见的问题是浮动元素没有被其父元素包含;使用溢出是解决此问题的简单方法。

看一下这个示例,其中 pdiv 内部浮动 - div 不会展开以包裹它。如果我们将 overflow:hidden 添加到 div,它会垂直扩展以包含其子级。

上的最终结果

这是JSBin

对于具有可见以外的溢出值的框,边距永远不会折叠。

让我们看看 W3C 规范 了解更多信息(和示例) )在折叠边距上:

某些相邻的边距组合起来形成单个边距。据说这些利润率正在“崩溃”。如果没有非空内容、填充或边框区域或间隙来分隔它们,则边距是相邻的。

您在问题中包含的语句意味着当overflow设置为hiddenscroll时,无法使用此行为>自动

Expanding with Overflow

Boxes with an overflow value other than visible will expand vertically to enclose any floated descendant boxes

This property is useful when clearing floating elements. A common problem is that a floated element doesn't get contained by its parent; using overflow is an easy way to solve this problem.

Take a look at this sample where the p is floated from inside the div - the div doesn't expand to wrap it. If we add overflow:hidden to the div, it expands vertically to contain its child.

Here's the final result on JSBin

Collapsing Margins

Margins will never collapse for a box with an overflow value other than visible.

Let's take a look at the W3C spec for more info (and examples) on collapsing margins:

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

The statement you included in your question means that this behavior can't be used when the overflow is set to hidden, scroll, or auto.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文