CSS - 保证金和浮动资产

我们有一个带有静态定位的div。在里面我们有一段有余量的段落。 div的高度将是没有保证金的段落CSS - 保证金和浮动资产
我们有一个带float的div：left。在里面我们有一段有余量的段落。 div的高度将是该段加上其余量。

这是什么解释？

下面是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="nivel1"> 
<div id="nivel21"> 
    <p>Este es el primer parrafo</p> 
</div> 
<div id="nivel22"> 
    <p>Este es el primer parrafo</p> 
</div> 
</div> 

</body> 

</html>

而且CSS代码：

body { 
    margin:0; 
    padding:0; 
} 

#nivel1 { 
    border:solid; 
    border-color:#333; 
    margin:0; 
    background-color:#0F3; 
    margin:2em; 
} 

#nivel21 { 
    margin:2em; 
    float:left; 
    background-color:#C00; 

} 

#nivel22 { 
    margin:2em; 
    background-color:#FC0; 
}

这里是一个link试验场地。

来源

2010-04-29 David Casillas

你的问题是什么？ – alejandrobog 2010-04-29 22:35:51

你能描述一下你正在努力完成的任务吗？ – 2010-04-29 22:48:41

问题是：为什么将div从静态变为浮动会改变其计算高度的方式。我只是试图通过试验定位和布局来理解。对不起，如果我在我的帖子中不清楚。 – 2010-04-30 07:50:55

我想当你使用浮动属性浏览器填充要显示的元素是浮动的。

来源

2010-04-29 22:43:55

“填充元素”的含义是什么？看起来似乎发生的事情是浮动的div计算它的高度（正如你可以看到的背景颜色）作为内部的部分加上它的边距，而非浮动的div只是没有边缘的部分。这里没有填充。 – 2010-04-30 07:54:55

我的意思是一些浏览器可能会在内部增加顶部和底部填充以直观地显示元素是浮动的并且不与其他人内联，但是我只是在黑暗中拍摄：P – 2010-04-30 12:32:08

好吧，既然没有问题，也没有明确的元素命名，我会假设你想把2列放在一个容器中。荡涤代码一些更明确的命名和使用类的结果是：（希望这是你要找的人）

<html> 
    <head> 
    <title>divs</title> 
    <style> 
     .container{ 
     float: left; 
     background-color: #0F3; 
     } 
     .column { 
     margin: 2em; 
     float: left; 
     padding: 5px; 
     } 
     #lefty{ 
     background-color: #C00; 
     } 
     #righty{ 
     background-color: #FC0; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div id="lefty" class="column"> 
     <p>Column number 1</p> 
     </div> 
     <div id="righty" class="column"> 
     <p>Column number 2</p> 
     </div> 
    </div> 
    </body> 
</html>

来源

2010-04-29 23:03:32

我真的很抱歉，我做了不要清楚地解释自己。我只是试着学习CSS属性。我发现，当我将div从静态切换到浮动时，它改变了它的高度计算方式，所以我只是用两个相等的div来创建一个测试页面，只是一个静态和一个浮动来研究不同的行为。我现在清楚地知道Safari Web Insector发生了什么事情，浮动的div增加了它对内部段落及其边缘的重视，而静态的div不增加内部的段落边缘。为什么会发生？ – 2010-04-30 08:00:54

我认为你误解了利润率。一个边框被添加到一个盒子的外部，增加了它与它的parant或兄弟姐妹的距离。填充是一种内部边缘，增加了儿童从边界的距离。所以，这个问题真的是为什么红色更大，而不是为什么黄色更小;） – 2010-04-30 14:21:17

好吧，现在我们有一个很好的问题，如果你们中的任何一个人都可以给出解释，我们会很高兴听到答案。无论如何，谢谢，下次我会尽量做到更精确。 – 2010-04-30 20:07:54

这是因为两个div的互动。除去浮动的，静态的会收缩。会发生什么是，浮动div推动静态div中的文本，从而扩大它。

更多评论：段落标记在这里是无关紧要的。您可以通过删除段落边距并增加元素本身的边距来达到相同的效果。无论哪种方式，静态定位元素会增长，而浮动元素则不会。这个CSS同样的事情：

body { 
    margin:0; 
    padding:0; 
} 

p { 
    margin: 0; 
} 

#nivel1 { 
    border:solid; 
    border-color:#333; 
    margin:0; 
    background-color:#0F3; 
    margin:2em; 
} 

#nivel21 { 
    margin:5em; 
    float:left; 
    background-color:#C00; 

} 

#nivel22 { 
    margin:5em; 
    background-color:#FC0;

}

来源

2013-10-16 00:02:33 osa

答案的底部有一个'}'。 – 2016-04-09 12:31:23

几个编辑之后，我想我已经得到了答案现在:)

我也遇到过这种令人费解的行为。我认为，部分原因是在section 10.6.7 of the CSS2.1 spec：

在某些情况下（参见，例如，部分10.6.4和10.6.6以上），一个元件的其建立一个块格式上下文的高度被计算为如下所示：

如果它只包含内联级别的子项，则高度为最顶端的行框顶部与最底部行框底部之间的距离。

如果它具有块级别的子级，则高度为顶层块级子框中顶部边缘边缘与最底层块子底部边缘边缘之间的距离，即级子框。

第10.6.6节中列出的那些“某些情况”包括浮动元素。

在讨论的#nivel21元件是浮动元件，它包含因此块级儿童（一个），施加这个特殊情况的规则，并使用在顶部和底部与容限计算<div>的高度标记的边缘。

其次，this page about collapsing margins可能给一个线索，为什么#nivel22高度不不包括标签的边缘：

的[...] p元素上的margin-top有效成为div元素的上边距，并推动DIV下来的页面[...]

的标签有一个隐含的保证金（在我的测试10px的），这就需要用的2em的保证金崩溃外部#nivel1元素，因此浏览器假装标签没有任何边距（它代之以将其放在#nivel22上），这意味着#nivel22的高度缩小到标签的行高度。

我希望这个答案对我以外的人有意义！

来源

2014-04-15 12:43:45 chris

CSS - 保证金和浮动资产

回答

相关问题