在sublime中设置的是兄弟关系，到了浏览器解析就变成了父子关系

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局案例</title>
    <style type="text/css">
        *{
    padding:0px;
    margin:0px;
}
.header{
    width:100%;
    height:100px;
    background-color:#ccc;
    overflow:hidden;
    *zoom:1;
}
.header .logo img{         
    width:300px;
    height:85px;
    padding-top:7.5px;   /*在header部分给logo图垂直居中时，建议使用法一margin的计算方法来实现*/
    padding-left:100px;
}
.header .logo{
    float:left;
}
.header .nav{
    float:right;
}
.header .nav ul{
    list-style:none;
    margin-right:100px;
}
.header .nav ul li{
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    font-size:15px;
    font-weight:bolder;
    color:#7d7d7d;
}
.header .nav ul li a{
    text-decoration:none;
    color:#7d7d7d;
}
.header .nav ul li a:hover{
    color:orange;
}
.main .top{
    width:100%;
    height:600px;    /*遇到div要完全裹着img时，因为行内元素会有默认间隙，因此导致
    父的div应该会比img高4px，所以解决方法要么设img为block，要么直接设父div的height为img高即可*/
}
.main .top img{
    width:100%;
    height:600px;    /*给图片修改大小，直接设置width和height即可*/
}
.main .toplayer{    /*遮罩层的做法*/
    position:absolute;
    top:100px;
    left:0px;
    height:600px;
    width:100%;
    background-color:#000;
    opacity:0.5;
}
.main .toplayer-top{
    position:absolute;
    top:400px;
    left:50%;
    margin-top:-150px;
    margin-left:-250px;
    width:500px;
    height:300px;
    background-color:blue;
    z-index:2;
}
.main .toplayer-top .word{
    padding-top:100px;
    text-align:center;
    font-size:45px;
    font-weight:bolder;
    color:#fff;
    font-family:"微软雅黑";
}
.main .toplayer-top button{
    width:200px;
    height:60px;
    margin-top:50px;
    text-align:center;
    /*margin:50px auto 0px;*/  /*因为设置了浮动导致脱离了文档流的原因，使用margin：0 auto；的方法不行；了*/
    margin-left:150px;   /*对于脱离文档流的元素设置水平居中的方法要么法一设置具体计算值margin，
                         要么用绝对定位的方法*/
    background-color:#f5704f;
    border-radius:8px;   /*设置周围圆角*/
    color:#fff;
    font-family:"微软雅黑";
    font-weight:bolder;
    font-size:14px;
}
.main .middle{
    width:1000px;
    margin:0 auto;
}.main .middle .m-top{
    padding-top:50px;
}
.main .middle .m-top .clear{
    clear:both;
}
.main .middle .m-top .commen{
    width:33.3%;
    text-align:center;
    float:left;
}
.main .middle .m-top .commen img{
    width:100px;
    height:100px;
}
.main .middle .m-top .commen .comm{
    font-size:20px;
    font-weight:bolder;
    color:#7d7c7f;
    padding-top:20px;
}
.main .middle .m-middle{
    font-size:22px;
    font-weight:bold;
    color:#e19796;
    padding-top:50px;
    font-style:italic;
    text-align:center;
    padding-bottom:50px;
}
.main .middle .m-bottom .clear{
    clear:both;
}
.main .middle .m-bottom .m-com{
    float:left;
    padding:10px;
    text-align:center;
}
.main .middle .m-bottom .m-com img{
    width:310px;
    height:260px;
}
.main .middle .m-bottom .m-com .des1{
    font-size:20px;         /*由于des1和des2的font-size和font-weight是一样的，所以
                            这两个可以放到父元素来写*/
    font-weight:bold;      
    color:#7d7d7f;
    padding-top:20px;
}
.main .middle .m-bottom .m-com .des2{
    font-size:20px;
    font-weight:bold;
    color:#bdbdbc;
    padding-top:10px;
}
.main .bottom{
    width:100%;
    height:200px;
    background-color:#f9f9f9;
}
.footer{
    width:100px;
    height:200px;
    background-color:red;
}
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">手记</a></li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <div class="top">
            <div>
                <img src="image/1.jpeg">
            </div>
        </div>
        <!-- 遮罩层 -->
        <div class="toplayer"></div>
        <div class="toplayer-top">
            <div class="word">MY BEAUTIFUL LIFE</div>
            <button href>LOOK MORE &gt;</button>
        </div>
        <div class="2"></div>
        <div class="middle">
            <div class="m-top">
                <div class="commen weibo">
                    <img src="image/weibo.png">
                    <div class="comm">MICROBLOG</div>
                </div>
                <div class="commen weixin">
                    <img src="image/weixin.png">
                    <div class="comm">WECHAT</div>
                </div>
                <div class="commen qq">
                    <img src="image/QQ.png">
                    <div class="comm">QQ</div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="m-middle">
                "I want to give good things to record down,<br><!-- 至于换行就直接手动加br换行 -->
                after the recall will be very beautiful."
            </div>
            <div class="m-bottom">
                <div class="m-com">
                    <img src="image/03-01.jpg">
                    <div class="des1">Cool Image</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="m-com">
                    <img src="image/03-02.jpg">
                    <div class="des1">Great Picture</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="m-com">
                    <img src="image/03-03.jpg">
                    <div class="des1">Cool Image</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="clear"></div>
        </div>
        <div class="bottom"></div>
        <div class="1"></div>
    </div>
    <!-- 底部 -->
    <div class="footer"></div>
</body>
</html>

老师，我一开始想要实现的功能是给.bottom设置宽度100%的背景色的，但是发现背景色的宽度永远和middle一样，是1000px，但是我是给middle设置的width:1000px;，并没有给.bottom 设置，并且这两个元素是兄弟元素，并不是父子关系，我又修改了middle的宽度，发现同样bottom也跟着发生了变化，所以我就想看看f12，发现在sublime中是兄弟元素的middle和bottom，到了浏览器就变成了兄弟元素，

在sublime是兄弟元素

到了浏览器就成了父子关系

还有footer和main是兄弟关系

但是到了留言器就又变成了父子关系

老师，这是怎么回事？应该如何修改？

宝慕林842399 2019-03-02

源自：项目：网页布局案例 2-8 主体部分的底部

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-03-04 10:02:23

你好同学 , 老师又把你的代码复制下来看了一下 ,在老师这里确实是bottom在middle里面 , 如果在编辑器中把两个标签写成兄弟元素 ,那么在浏览器中是不可能解析成父子关系的 , 如果解析成父子关系 ,只有两种情况 , 第一就是你真的把它写成了父子关系 , 第二就是缺少结束标签 ,那么也会出现解析错误.

像老师上次回复 ,你的代码中两种情况都有 , 老师在截图中也展示出来了 . 建议同学再认真找一下 , 可以像老师这样 , 从最里面的标签开始一对一对的闭合

然后把里面的闭合之后 ,继续往外闭合它的父标签 , 从里到外一层一层的闭合查找 , 就会发现的你的代码中缺少结束标签</div> .

另外 , 以下是老师按照同学的描述 ,把bottom与middle改成了兄弟关系 , footer和mian改成了兄弟关系 ,同学可以参考一下

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>布局案例</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}

.header {
width: 100%;
height: 100px;
background-color: #ccc;
overflow: hidden;
*zoom: 1;
}

.header .logo img {
width: 300px;
height: 85px;
padding-top: 7.5px;
/*在header部分给logo图垂直居中时，建议使用法一margin的计算方法来实现*/
padding-left: 100px;
}

.header .logo {
float: left;
}

.header .nav {
float: right;
}

.header .nav ul {
list-style: none;
margin-right: 100px;
}

.header .nav ul li {
float: left;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 15px;
font-weight: bolder;
color: #7d7d7d;
}

.header .nav ul li a {
text-decoration: none;
color: #7d7d7d;
}

.header .nav ul li a:hover {
color: orange;
}

.main .top {
width: 100%;
height: 600px;
/*遇到div要完全裹着img时，因为行内元素会有默认间隙，因此导致
父的div应该会比img高4px，所以解决方法要么设img为block，要么直接设父div的height为img高即可*/
}

.main .top img {
width: 100%;
height: 600px;
/*给图片修改大小，直接设置width和height即可*/
}

.main .toplayer {
/*遮罩层的做法*/
position: absolute;
top: 100px;
left: 0px;
height: 600px;
width: 100%;
background-color: #000;
opacity: 0.5;
}

.main .toplayer-top {
position: absolute;
top: 400px;
left: 50%;
margin-top: -150px;
margin-left: -250px;
width: 500px;
height: 300px;
background-color: blue;
z-index: 2;
}

.main .toplayer-top .word {
padding-top: 100px;
text-align: center;
font-size: 45px;
font-weight: bolder;
color: #fff;
font-family: "微软雅黑";
}

.main .toplayer-top button {
width: 200px;
height: 60px;
margin-top: 50px;
text-align: center;
/*margin:50px auto 0px;*/
/*因为设置了浮动导致脱离了文档流的原因，使用margin：0 auto；的方法不行；了*/
margin-left: 150px;
/*对于脱离文档流的元素设置水平居中的方法要么法一设置具体计算值margin，
要么用绝对定位的方法*/
background-color: #f5704f;
border-radius: 8px;
/*设置周围圆角*/
color: #fff;
font-family: "微软雅黑";
font-weight: bolder;
font-size: 14px;
}

.main .middle {
width: 1000px;
margin: 0 auto;
}

.main .middle .m-top {
padding-top: 50px;
}

.main .middle .m-top .clear {
clear: both;
}

.main .middle .m-top .commen {
width: 33.3%;
text-align: center;
float: left;
}

.main .middle .m-top .commen img {
width: 100px;
height: 100px;
}

.main .middle .m-top .commen .comm {
font-size: 20px;
font-weight: bolder;
color: #7d7c7f;
padding-top: 20px;
}

.main .middle .m-middle {
font-size: 22px;
font-weight: bold;
color: #e19796;
padding-top: 50px;
font-style: italic;
text-align: center;
padding-bottom: 50px;
}

.main .middle .m-bottom .clear {
clear: both;
}

.main .middle .m-bottom .m-com {
float: left;
padding: 10px;
text-align: center;
}

.main .middle .m-bottom .m-com img {
width: 310px;
height: 260px;
}

.main .middle .m-bottom .m-com .des1 {
font-size: 20px;
/*由于des1和des2的font-size和font-weight是一样的，所以
这两个可以放到父元素来写*/
font-weight: bold;
color: #7d7d7f;
padding-top: 20px;
}

.main .middle .m-bottom .m-com .des2 {
font-size: 20px;
font-weight: bold;
color: #bdbdbc;
padding-top: 10px;
}

.main .bottom {
width: 100%;
height: 200px;
background-color: #f9f9f9;
}

.footer {
width: 100px;
height: 200px;
background-color: red;
}
</style>
</head>

<body>

<div class="header">
<div class="logo">
<img src="image/logo.png">
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>

<div class="main">
<div class="top">
<div>
<img src="image/1.jpeg">
</div>
</div>

<div class="toplayer"></div>
<div class="toplayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button href>LOOK MORE ></button>
</div>
<div class="2"></div>
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="image/weibo.png">
<div class="comm">MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="image/QQ.png">
<div class="comm">QQ</div>
</div>
<div class="clear"></div>
</div>
<div class="m-middle">
"I want to give good things to record down,<br>
after the recall will be very beautiful."
</div>
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg">
<div class="des1">Great Picture</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="clear"></div>
</div>

<div class="1"></div>
</div>
<div class="bottom"></div>
</div>

<div class="footer"></div>
</body>

</html>