Question

为什么这段代码不能制作红色div？我用h1尝试了同样的事情并且它有效。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            div {background-color:#f00;}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Answer 1

因为DIV需要内容（或height设置）的高度大于0，因此是可见的背景。尝试添加一些文字......

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            div {background-color:#f00;}
        </style>
    </head>
    <body>
        <div>A</div>
        <div>A</div>
        <div>A</div>
        <div>A</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

＆＃13;

这里没有内容，但有一组height：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            div {background-color:#f00; height: 20px;}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

＆＃13;

Answer 2

如上所述; div需要内容或指定的高度（div是块级元素，因此将扩展以将宽度填充到100％） - 而不是简单地添加内容 - 您可以使用css设置高度。我还添加了一个小样式规则来显示奇数的不同颜色。你可以使用div：empty {}来定位空div，如果你要填充内容和一些空。

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            div {background-color:#f00; height: 30px}
            div:nth-of-type(odd) {background-color: yellow}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

＆＃13;

为什么这个HTML代码没有成为红色div？

2 个答案: