如果您没有定义 div 宽度，通常会发生什么情况？

Question

背景

通常，当我想要一个div来填充水平space时，我会使用width:100%

然而，在我的一个页面上，width:100% 标记会水平扩展页面，导致右侧有一列空白 space，并且滚动条会出现在 x-轴.

我怀疑这是因为某些子 div 中的 padding。

无论如何，当我从 div 样式中删除 width:100% 时，问题似乎得到了解决。所以我最终得到了这个：

<div style="background:rgba(0,0,0,0.8);padding:8px;"><h1>smelle ;)</h1><?php include("navbar.php"); ?></div>

页面恢复正常，div继续填满页面的整个水平长度，右边也没有空隙了。

我的问题是...

在我当前的代码中，没有定义 div 的宽度，但它继续填充水平长度。

它工作正常，我已经在几个浏览器上试过了。我只是担心它可能会导致将来出现问题，或者在使用旧版浏览器时出现问题。

谁能告诉我这是否合适，或者我应该做些什么？

Answer 1

没关系。 div 中 width 的默认值为 auto.

它的工作原理与 width: 100% 非常相似，因为它会使 div 占据父级的整个宽度。不同之处在于它将在宽度中包含边框和填充，因此如果您有这些，外部宽度将不会比父级宽。

Answer 2

不加宽度是正确的。

为什么？

如果您想要“100%”，则根本不需要修改宽度，因为这是所谓的块级元素（元素display: block;，无论是默认还是手动分配 CSS）：它们尽可能多地抓取 space 水平方向。

滚动条的行为是由 outer div 上的 padding: 8px 引起的。标准的 box-model 将宽度定义为元素的 inner 宽度，您必须在其上添加左右填充和边框才能找出元素的实际宽度。

如果以后想避免这个问题，可以申请

html { 
    box-sizing: border-box; 
}

*, *:after, *:before {
    box-sizing: inherit;
}

在您第一个加载的 CSS 样式表的最顶部。这使得填充成为“内部填充”。与边界相同。边框和填充不再增加元素的尺寸，而是出现在内部。这是旧版 Internet Explorer 一直使用的盒子模型。 box-sizing 属性也允许您在现代浏览器中使用它。 content-box 是以前所谓的 W3C 框模型（所有浏览器的默认值，除非您指定其他内容），旧 IE 使用的现在称为 border-box。这张图就是了（用图的文章太过时了不想link了）：

在这里找到一个解释盒子模型的短视频（如果你想做网页设计，这是绝对重要的）：

https://helpx.adobe.com/dreamweaver/how-to/understanding-the-box-model.html

Answer 3

外div有一个padding:8px;。所以当给定width:100%;时，左右会多出8px，造成滚动。

您可以通过指定 box-sizing: border-box;

将填充也包含到宽度中

如您所述，为子 div 填充不是问题。此外，如果子 divs 的总宽度大于 window 大小，也可能导致滚动。

避免宽度时，div 将始终填满整个宽度，除非您指定 float 或 position 属性

Answer 4

我认为原因是如果 div 被声明为没有宽度它会表现得像 width:auto; 意味着它将取决于它的内容，这就是为什么它会水平扩展，因为你没有在上面放置特定的宽度；

喜欢下面这个例子；

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="lolkittens" />

    <title>Untitled 5</title>
</head>

<body>
<div class="container">          
the quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bankthe quick brown fox jumps over the lazy dog near the river bank                
</div>  
<body>
</html>

希望这对您的理解有所帮助

如果您没有定义 div 宽度，通常会发生什么情况？

What usually happens when you don't define a div width?

html

css

width

为什么？