添加 CSS 边框更改 HTML5 网页中的定位
Posted
技术标签:
【中文标题】添加 CSS 边框更改 HTML5 网页中的定位【英文标题】：Adding CSS border changes positioning in HTML5 webpage 【发布时间】：2012-07-26 01:54:31 【问题描述】：当我在 html 5 文档中添加边框时，页面元素移动时遇到问题。
我希望包含的标题元素（灰色）出现在屏幕顶部，但它似乎从内部 div（红色）中占据了边距。但是，如果我在标题中添加边框，它会出现在我期望的位置，并且红色的内部 div 只会稍微移动！
（第一张图片：无边框；第二张图片：有边框）
我尝试设置相对或绝对定位，使用 div 代替标题元素，将边距和填充设置为 0，使用 HTML4 文档类型等。HTML 验证。这是剥离了所有内容的 HTML，但仍然无法正常工作。它发生在最新的 Chrome 和 FF 中。
帮助！！我错过了什么？？或者任何解决方法（除了保留边界）？
HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<header><div id="mydiv"></div></header>
<div id="content"><p>hello</p></div>
</body>
</html>
CSS：
header background-color:#CCCCCC; width:960px; height:430px;
#mydiv width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000;
【问题讨论】：
【参考方案1】：问题来自于所谓的“边距崩溃”。很简单：2 个相邻的边距折叠到两者中的最高值（我说的是两个，但可能更多）。
在您的情况下，“#mydivs”margin-top - 80px - 正在触摸“标题”margin-top - 0px。它们是相邻的——它们之间没有元素，也没有填充，也没有边框。
因此，边距折叠到两者中的最高者 (80px)，然后将其应用于父子层次结构中最高的元素 - 在本例中为 header。
解决这个问题的一种方法是在页边距之间放置一些东西；一些填充或标题上的边框都可以正常工作。
header
border-top: 0.1em solid rgba(0,0,0,0);
第二种解决方案（我的首选）是让父元素创建一个新的块格式化上下文。这样一来，它的边距就不会与它的孩子的边距一起崩溃。
如何创建块格式化上下文？ 有四种可能的方法。
-
通过浮动。
“立场明确”。
添加以下显示之一：“table-cell”、“table-caption”或“inline-block”。
添加可见以外的溢出。
为了防止页边距塌陷，您可以执行以下 4 项中的任何一项。我通常选择 4 号）- 将溢出设置为自动，因为它只是副作用......好吧，它不太可能成为一个问题。
header
overflow: auto;
这基本上就是父子边距折叠。兄弟姐妹之间也有边距折叠，规则几乎相同：2 个相邻边距折叠到两者中的最高值。不是解决方案。
这里有一个很好的解释边距折叠 - http://www.howtocreate.co.uk/tutorials/css/margincollapsing
【讨论】：
感谢您更新的答案，非常有用！根据我的回答，在这种情况下，绝对定位对我有用，但我意识到并非总是如此。很高兴知道其他解决方案-无论如何我通常都在使用其中一种，这显然在大多数情况下都阻止了这种情况发生:) 没问题。只是练习我的英语；）【参考方案2】：这被称为collapsing margins。可以通过将padding 添加到父元素（在本例中为<header>）来克服它们。
代码（with padding，without padding）：
注意padding:0.001em;。这使得边距不再折叠，但不会向<header> 添加任何空间。
header padding:0.001em; background-color:#CCCCCC; width:960px; height:430px;
#mydiv width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000;
【讨论】：
谢谢，但我在 Chrome 上的两个例子看起来都一样。如果我将填充更改为 0.1em，我可以让它工作，但你可以注意到差距。我阅读了您发布的链接，并使内部 div 绝对有效，所以我认为我们应该能够在不影响布局的情况下做到这一点。 感谢您的回答很有帮助，但必须使用 0.1em 填充确实为标题增加了空间，所以这对我来说不是一个解决方案，所以我会赞成帮助但我不能接受它:) @FluffyKitten，你用过0.001em吗？您也可以添加更多的 0（例如0.000001em）。
我可以让它工作的唯一方法是使用更少的 0 而不是更多！我尝试了 0.001em、0.01em 和最终 0.1em 工作，但显示出明显的差距（在 Chrome 中，没有检查 FF）。您的 jsfiddle 示例对我来说看起来都一样。
@FluffyKitten，哦，真可惜。是的，我签入了 Fx。【参考方案3】：
bfrohs 答案中指向 collapsing margins 的链接帮助我找到了适合我的解决方案，它可能会帮助其他遇到此问题的人。
绝对定位的 div 不会折叠，因此将 header 元素设为相对，内部 div 设为绝对可以提供正确的定位，而无需使用填充或边距添加空间。
工作示例： http://jsfiddle.net/8QPGJ/
（无定位：http://jsfiddle.net/8QPGJ/1/）
【讨论】：
以上是关于添加 CSS 边框更改 HTML5 网页中的定位的主要内容，如果未能解决你的问题，请参考以下文章