html - 当你没有定义 div 宽度时通常会发生什么？

Question

背景

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

但是，在我的一个页面上，width:100% 标记会水平扩展页面，导致右侧有一列空白，并且滚动条会出现在 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

不添加宽度是正确的。

为什么？

如果您想要“100%”，则根本不需要修改宽度，因为这是所谓的 block 级元素(具有 的元素)的标准行为display: block;，无论是默认设置还是 CSS 中的手动分配):它们在水平方向上占据尽可能多的空间。

滚动条的行为是由 outer div 上的 padding: 8px 产生的。标准盒子模型将宽度定义为元素的内部宽度，您必须在其上添加左右填充和边框以找出实际 元素的宽度。

如果您想以后避免出现此问题，可以申请

html { 
    box-sizing: border-box; 
}

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

位于第一个加载的 CSS 样式表的最顶部。这使得填充有点成为“内部填充”。与边框相同。边框和填充不再增加元素的尺寸，而是发生在内部。这是老 Internet Explorer 一直使用的盒子模型。 box-sizing 属性也允许您在现代浏览器中使用它。 content-box 是以前所谓的 W3C 盒子模型(在所有浏览器中默认，除非您指定其他内容)，旧 IE 使用的现在称为 border-box。该图片显示了它(使用该图片的文章已经过时了，我不想链接到它):

在这里找到一个解释盒子模型的简短视频(如果您想做网页设计，这绝对是至关重要的):

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