Question

<html>
    <head>
        <title> Webpage </title>
    </head>
    <body>
        <div class="mydiv">
            <h1>HelloWorld!!!</h1>
        </div>
    </body>
    <style>
         body{

         }
         .mydiv{
              width:100%;
              height:10%;
              background-color:#e1e1e1;
         }
    </style>
</html>

运行上面的行会在其左侧和右侧留下空格。如果我使用下面的CSS

，它将覆盖空间

    <style>
         body{
            overflow-x:hidden;
         }
         .mydiv{
              width:102%;
              height:10%;
              background-color:#e1e1e1;
              top:-7px;
              position: relative;
         }
    </style>

我想要的是div占用整个水平屏幕而不设置宽度为102％

谢谢！

Answer 1

div确实占用整个100%宽度，因为它是块级元素，但默认情况下，body标签上有一个边距/填充，您要重置：

body {
   padding: 0;
   margin: 0;
}

同样在style或body中移动head阻止，</body></html>之间不应该有任何内容。

Answer 2

正如@dfsq提到的那样，你的css没有问题，它按预期工作，你只需要知道在Chrome中，例如<body>的默认保证金是8px。 / p>

对于大多数HTML元素的CSS，浏览器内置了“默认值”（并且它们因供应商而异），以防止您的页面看起来完全不可读（如果您有纯HTML），但它们当然是为了被覆盖你自己的CSS。这就是大多数网站使用reset.css或normalize.css。

的原因

如何使<div>占据整个水平空间</div>

2 个答案: