2-4 问题

老师在讲课时将.header中的width值换为100%，实现了最终的定位效果，可是我仍然使用800px,显示效果变成了下图效果，这是什么原因呢，除了用width:100%修改，有没有别的方法呢？

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>2-4经典行布局</title>
   <style type="text/css">
       body{
           margin: 0;
           padding: 0;
           color: #000;
           text-align: center;
           font-size: 16px;
       }
       .header{
           width: 800px;
           height: 50px;
           background-color: #333;
           margin: 0 auto;
           line-height: 50px;
           position: fixed;
       }
       .banner{
           width: 800px;
           height: 300px;
           background-color: #30a457;
           margin: 0 auto;
           line-height: 300px;
           padding-top: 50px;
       }
       .container{
           width: 800px;
           height: 1000px;
           background-color: #4c77f2;
           margin: 0 auto;
           line-height: 1000px;
       }
       .footer{
           width: 800px;
           height: 100px;
           background-color: #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-09-27

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

收起

1回答

卡布琦诺 2017-09-28 11:12:48

如果你想设置header的宽度100%显示，就必须使用width:100%显示，假如你只是想实现宽度：800px。且固定在顶部的header，则可以使用如下方法进行实现：

.header{
    width: 800px;
    height: 50px;
    background-color: #333;
    /*margin: 0 auto;*/
    line-height: 50px;
    position: fixed;
    left:50%;
    margin-left:-400px;
}

其中margin-left:-400px;中的400px是宽度800px的一半，希望可以帮到你！

收起回答

提问者不靠谱的社会好青年 #1

我尝试了将margin-left:-400px; 改为了margin-right:400px; 为什么不行呢？

2017-09-28 20:55:49
卡布琦诺回复提问者不靠谱的社会好青年 #2

因为你的盒子是向右偏移了啊，在设置margin-right:400px;是不会起作用的，只能使用margin-left:-400px; 向左拉动，祝学习愉快！

2017-09-28 21:10:56