在HTML5网页中添加CSS边框更改定位
Flu*_*ten 8 css html5 position
当我在HTML 5文档中添加边框时,我遇到了移动页面元素的问题.
我期望包含的标题元素(灰色)出现在屏幕的顶部,但它似乎从内部div(红色)获取边距.但是,如果我在标题中添加一个边框,它会出现在我预期的位置,红色的内部div只会略微移动!
(第1张图片:没有边框;第2张图片:带边框)
我尝试设置相对或绝对定位,使用div而不是header元素,将margin和padding设置为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; }
ban*_*aka 10
问题来自于"保证金崩溃".这很简单: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号) - 设置溢出到auto,因为它只是副作用......好吧它很可能成为一个问题.
header {
overflow: auto;
}
这基本上是父母子女边缘崩溃的原因.兄弟姐妹之间也存在边缘崩溃,规则大致相同:2个相邻的边缘坍塌至两个中的最高点.这不是解决方案.
这是对保证金崩溃的一个很好的解释 - http://www.howtocreate.co.uk/tutorials/css/margincollapsing