关于div嵌套的问题解释

最新推荐文章于 2021-08-25 10:48:00 发布

bo_无问西东

最新推荐文章于 2021-08-25 10:48:00 发布

阅读量1.1k

点赞数 1

分类专栏： IT男文章标签： div

本文链接：https://blog.csdn.net/qq_43611486/article/details/89924878

版权

IT男专栏收录该内容

49 篇文章 0 订阅

订阅专栏

讨论？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
       <div class="nav">
            <div>
                <div class="nav_left"></div>
                <div class="nav_center"></div>
            </div>
       </div>
</body>
</html>
css界面
*{
    margin: 0;
    padding: 0;
}
.nav{
    width: 100%;
    height: 30px;
    background-color: #d0d0d0;
}
.nav div{
    width:1190px;
    height:30px;
    margin: 0 auto;
}
.nav div.nav_left{
    float: left;
    width:595px;
    height:30px;
    background-color: aquamarine;
}
.nav div.nav_center{
    float: left;
    width:595px;
    height: 30px;
    background-color: crimson;
}

你觉得会出现什么样的情况？
问题解答：
首先：我们写的第二级div无意义，这样导致nav里包不下两个div
第二：.div div.nav_left 这样的逻辑本身就是错误的，是的，请教了老师，老师也是这样说，
解决办法1：
将第二级div去掉，直接让nav包两个div
解决办法2：
将第二级div再写一个class，就是给它加上类，然后让他独立的写.xxx css代码.我觉得第二种比较好，自我感觉更加清晰，也符合盒子模型

最终：不管怎样，我的淘宝页面中就是.nav div 这样写的,也可以写出相应的效果，可能是我加了内嵌样式的原因吧。我觉得还是第二种办法更好一点，希望不理解的小伙伴多加练习，fighting!!!