关于块元素的高度

来源：2-2 编程练习

CoffeePlayer

2020-07-26 15:02:11

父元素是块元素，不设置高度的话，不是高度由自元素扩充吗？为什么这里的高度还是0.。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            font-family: Arial;
            font-size: 24px;
            color: #fff;
        }
        a {
            text-decoration: none;
        }

        header {
            height: 80px;
            background: #000;
        }
        header > .container {
            width: 1200px ;
            margin: 0 auto ;
        }

        header > .container > a {
            float: left ;
            display: block;
            margin: 16px 25px ;
        }

        header > .container > nav {
            float: right ;
        }

        header > .container > nav > a {
            float: left;
            font-size: 25px;
            display: block;
            height: 73px;
            width: 110px;
            line-height: 73px;
            color: #fff ;
            text-align: center;
        }

        header > .container > nav > .Home{ background: #d40112;}
        header > .container > nav > .Course{ background: #feb800;}
        header > .container > nav > .Actual{ background: #78b917;}
        header > .container > nav > .Plan{ background: purple;}
        header > .container > nav > .FAQ{ background: #f27c01;}
        header > .container > nav > .Notes{ background:blue; }

        header > .container > nav > a:hover,
        header > .container > nav > a.active {
            padding-bottom: 7px;
        }
    </style>
</head>
<body>
<header>
    <div class="container">
        <a href="#">
            <img src="http://climg.mukewang.com/582e5f160001b17100400040.png">
            MYMOOC
        </a>
        <nav>
            <a class="Home active" href="#">Home</a>
            <a class="Course" href="#">Course</a>
            <a class="Actual" href="#">Actual</a>
            <a class="Plan" href="#">Plan</a>
            <a class="FAQ" href="#">FAQ</a>
            <a class="Notes" href="#">Notes</a>
        </nav>
    </div>

</header>
</body>
</html>

写回答

1回答