在HTML5网页中添加CSS边框更改定位

当我在 HTML 5文档中添加边框时,我遇到了移动页面元素的问题.

我期望包含的标题元素(灰色)出现在屏幕的顶部,但它似乎从内部div(红色)获取边距.但是,如果我在标题中添加一个边框,它会出现在我预期的位置,红色的内部div只会略微移动！

(第1张图片：没有边框;第2张图片：带边框)

我尝试设置相对或绝对定位,使用div而不是header元素,设置margin和&填充为0,使用HTML4 doctype等.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; }

解决方法

问题来自于“保证金崩溃”.这很简单：2个相邻的边缘崩溃到两个中的最高点(我说两个,但可能更多).

在你的情况下,’#mydivs’margin-top – 80px – 触及’header的margin-top-0px.它们相邻 – 它们之间没有任何元素,也没有填充物,也没有边界.

因此,边距会崩溃到两个中最高的(80px),然后应用于父子层次结构中最高的元素 – 这就是这种情况下的标题.

这个问题的一个解决方案是在边缘之间放置一些东西;一些填充,或标题上的边框(工作正常).

header {
  border-top: 0.1em solid rgba(0,0);
}

第二个解决方案(我的首选解决方案)是使父元素创建一个新的块格式化上下文.这样,它的边缘就不会随着它的孩子而崩溃.

如何创建块格式化上下文？
有四种可能的方式.

>浮动它.
>“排名绝对”.
>添加以下显示之一：“table-cell”,“table-caption”或“inline-block”.
>添加除可见之外的溢出.

为了防止边缘崩溃,你可以做任何这些4.我通常选择4号) – 设置溢出到auto,因为它只是副作用……好吧它很可能成为一个问题.

header {
  overflow: auto;
}

这基本上是父母子女边缘崩溃的原因.兄弟姐妹之间也存在边缘崩溃,规则大致相同：2个相邻的边缘坍塌至两个中的最高点.这不是解决方案.

这是对边缘崩溃的一个很好的解释 – http://www.howtocreate.co.uk/tutorials/css/margincollapsing

原文地址：https://www.jb51.cc/html5/168103.html

在HTML5网页中添加CSS边框更改定位

解决方法

相关推荐