                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

top的高度是100 main由于里边的left等元素高度为600 为什么footer要margin:600px 0 0 0;而不是700？

top的高度是100 main由于里边的left等元素高度为600 为什么footer要margin:600px 0 0 0; 而不是margin:700px 0 0 0;

qq_加菲喵_0

2016-06-15

源自：如何用CSS进行网页布局 5-2

关注问题我要回答

975

操作

收起

4 回答

十年wf
2016-08-11

两种方法：第一种是给main设置高度，让foot知道main的高度是多少它也就能贴合到main下面了，第二种就是设置margin-top：600px

0 回复有任何疑惑可以回复我~

收起回答

画心poison
2016-06-21

margin-top不是针对整个网页，而是针对它上面的兄弟元素，而main中的元素都是浮动的，是脱离了整个文档流的，所以设置foot的margin-top为600px是为了使foot到top的距离为600px，好给main中的元素留出位置。我这样说你明白吗？

0 回复有任何疑惑可以回复我~

收起回答

Happy_learning

我也不理解。。为什么无视了最顶部那个100px 你这么说。。。还是不能理解求详细

2016-06-29 回复有任何疑惑可以回复我~

十年wf 回复 Happy_learning

因为你的margin里面加入了top，仅针对了main上面一块，所以要600px，忽略掉head的那100px

2016-08-11 回复有任何疑惑可以回复我~

weibo_哆啦A梦有大口袋_0
2016-06-15

你把代码贴出来，我才知道你错哪里了，才好跟你讲啊

0 回复有任何疑惑可以回复我~

收起回答

weibo_哆啦A梦有大口袋_0
2016-06-15

你代码怎么在写，表示你理解错了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px;margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9;clear:both;}
</style>
</head>
<body>
<div class="top">
    <div class="head">head</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
    <div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

qq_加菲喵_0 提问者

知道理解错了，所以求答案解释么

2016-06-15 回复有任何疑惑可以回复我~