2-4问题，希望老师解释一下。我把banner的margin-top设置为50px不行吗？

为什么我设置.banner{margin：50px auto 0 auto;}，上方会有空白？给header设置了fixed不是会脱离正常文档流吗，那header应该会漂浮在banner上方才对啊。为什么会这样？

我注释掉的那行代码就是我的想法，但是会出错，顶端会出现空白。

<!DOCTYPE html>

<html>

<head>

<title>经典的行布局（2）</title>

body{

margin: 0;

padding: 0;

color: #fff;

text-align: center;

font-size: 16px;

}

.header{

width: 100%;

height: 50px;

background: #333;

margin: 0 auto;

line-height: 50px;

position: fixed;

}

.banner{

width: 800px;

height: 300px;

background: #30a457;

margin: 0 auto;

padding-top: 50px;

/*margin: 50px auto 0 auto;*//*用着条语句顶端就会出现空白*/

}

.container{

width: 800px;

height: 1000px;

background: #4c77f2;

line-height: 1000px;

margin: 0 auto;

}

.footer{

width: 800px;

height: 100px;

background: #333;

margin: 0 auto;

line-height: 100px;

}

</style>

</head>

<body>

<div>这是页面的头部</div>

<div>这是页面的banner图</div>

<div>这是页面的内容</div>

<div>这是页面的底部</div>

</body>

</html>

唐小贱 2017-05-23

源自：CSS网页布局基础 2-1 经典的行布局（1）

收起

3回答

卡布琦诺 2017-05-24 15:44:23

margin: 50px auto 0 auto;出现空白是因为css的hack导致的，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。解决方法：改用padding-top，这是解决css的hack的一种方法，另外，如果想要让header漂浮在顶端，不仅要设置position: fixed，还需要定义位移量，也就是top值哦，希望对你有帮助~

收起回答

怎么都被占用了呢 2017-05-23 19:41:33

你好，如果想让你注释的那句话起作用的话，需要给固定定位的头部设置top值.header{ width: 100%; height: 50px; background: #333; margin: 0 auto; line-height: 50px; position: fixed;top:0px; }。祝学习愉快！

收起回答

提问者唐小贱 #1

为什么呢？还是不明白，不是已经漂浮在banner区块的margin-top上方了吗？我有点愚笨，请老师解答?

2017-05-23 19:46:47
怎么都被占用了呢回复提问者唐小贱 #2

你好，绝对定位和固定定位就是需要这么写（定义方向值），才能位于我们需要的位置。

2017-05-23 23:02:55
提问者唐小贱 #3

可是我的重点是header为什么不能漂浮在margin上，却可以漂浮在padding?

2017-05-23 23:35:08

小于飞飞 2017-05-23 16:44:04

你好，根据描述可以考虑，header设置了fixed 后是否设置 top和left值，如没有设置为0，在试一试，如还不可以，可以将具体的代码传上来，以便确定具体问题呦，希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳呦。

收起回答

提问者唐小贱 #1

我注释掉的那行代码就是我的想法，但是会出错，顶端会出现空白。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>经典的行布局（2）</title> <style type="text/css"> body{ margin: 0; padding: 0; color: #fff; text-align: center; font-size: 16px; } .header{ width: 100%; height: 50px; background: #333; margin: 0 auto; line-height: 50px; position: fixed; } .banner{ width: 800px; height: 300px; background: #30a457; margin: 0 auto; padding-top: 50px; /*margin: 50px auto 0 auto;*//*用着条语句顶端就会出现空白*/ } .container{ width: 800px; height: 1000px; background: #4c77f2; line-height: 1000px; margin: 0 auto; } .footer{ width: 800px; height: 100px; background: #333; margin: 0 auto; line-height: 100px; } </style> </head> <body> <div class="header">这是页面的头部</div> <div class="banner">这是页面的banner图</div> <div class="container">这是页面的内容</div> <div class="footer">这是页面的底部</div> </body> </html>

2017-05-23 17:07:46