Question

我是CSS的新手并为我的测试创建了这个html文件......但结果并不是我的预期..

以下是我的问题，

我的IE窗口的正确宽度是多少。
窗户的完美高度是什么......当我指定一个值时，没有任何变化。
我创建了3个部门 - 标题，页脚和内容......当我看到它时......每个部分之间都有一个很大的空间。它们为什么会出现？

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                background-color:#d0e4fe;
                width:1400px;
                height:1000px;
            }

            h1
            {
                color:orange;
                text-align:center;
            }

            #div-1
            {
                background-color:red;
            }
            #div-2
            {
                background-color:Green;
            }
            #div-3
            {
                background-color:Blue;
            }


        </style>

    </head>

    <body>

        <div id="div-1">
            <h1>Header<h1>
        </div>

        <div id="div-2">
            <h1>Content<h1>
        </div>

        <div id="div-3">
            <h1>Footer<h1>
        </div>


    </body>
</html>

Answer 1

您的body标签上的宽度应设置为“width：100％;”这将导致body标签占据窗口的整个宽度，彩色div部分也会拉伸整个宽度。
您可以将body标签上的高度设置为“height：100％;”或“身高：汽车;”。取决于你正在做什么。
空间来自您在每个div中的h1标签。他们设置了浏览器默认的保证金。如果将css属性设置为“margin：0px”，则应该消除所有额外空间。

Answer 2

首先，您没有在CSS中定义窗口的宽度或高度。它不会发生。您可以指定页面上特定元素的宽度，但这是一个稍微不同的事情。移除您的height和width媒体资源。

其次，由于h1标记上设置的默认边距，您的分区之间会有空格。如果您要删除它们，请在CSS中的margin: 0上设置h1。

第三，您可能需要查看this CSS tutorial at HTMLDog

CSS标题问题与标题

2 个答案: