Question

当我水平缩小（Chrome / Safari）浏览器窗口时，如果窗口宽度小于元素的宽度，则会出现滚动条。向右滚动后，我的内容的宽度等于视口的宽度，但前提是它没有显式的宽度。这导致某些内容被切断。

简单示例：

div {
  border: 1px solid red;
}

.two {
  width: 1000px;
}

<div class="one">Hello World</div>
<div class="two">Hello World</div>

（codepen）

如果.one元素是块元素，并且宽度默认为其父元素的宽度，为什么它最终不与较大的.two元素相同？

是因为html的宽度是视口而不是文档的宽度吗？

Answer 1

默认情况下，块级元素的宽度为其父元素的宽度。
内联元素的宽度是其内容的宽度。
（<body>是块级）

<html>
<head>
    <style>
        div {
            border: 1px solid red;
        }
        .two {
            width: 1000px;
        }
        .block {
            border: 2px dotted orange;
        }
        .inline {
            display: inline-block;
            border: 2px dotted blue;
        }
    </style>
</head>
<body>
  <div class='block'>
    <div class='one'>Hello World</div>
    <div class='two'>Hello World</div>
  </div>
  <div class='inline'>
    <div class='one'>Hello World</div>
    <div class='two'>Hello World</div>
  </div>
</body>
</html>

Answer 2

分析中缺少的元素是溢出部分。您说的是正确的，因为one具有其父级的宽度，但是two不会扩展其父级的宽度，会溢出它的宽度。

如果在body和html元素上添加边框，您会清楚地注意到这一点。

div {
  border: 1px solid red;
}

.two {
  width: 1000px;
}

body {
  border:2px solid;
}
html {
  border:2px solid green;
}

<div class="one">Hello World</div>
<div class="two">Hello World</div>

从视口开始，所有元素都是块级元素，并且将具有width:100%（html然后body然后one），但是您将{{1 }}更大，将产生溢出并且不会更改任何祖先元素的宽度。

您可能需要了解溢出的工作方式以及滚动条的添加方式：

UA必须将根元素上设置的“溢出”属性应用于视口。当根元素是HTML“ HTML”元素或XHTML“ html”元素，并且该元素具有HTML“ BODY”元素或XHTML“ body”元素作为子元素时，用户代理必须改为应用'overflow'属性如果根元素上的值是“ visible”，则从第一个此类子元素到视口。用于视口的“可见”值必须解释为“自动” 。传播值的元素必须具有用于“溢出”的值“可见” 。 ^ref

因此，基本上我们没有设置溢出值，因此默认情况下为two，因此视口的值为visible。因此，您在视口上有滚动条，而不是auto或html。

自动

“ auto”值的行为取决于用户代理，但应为溢出的框提供滚动机制。

如果您在body或html内禁止溢出，则不会滚动：

body

div {
  border: 1px solid red;
}

.two {
  width: 1000px;
}

body {
  border:2px solid;
  overflow:hidden;
}
html {
  border:2px solid green;
}

和<div class="one">Hello World</div> <div class="two">Hello World</div>

html

div {
  border: 1px solid red;
}

.two {
  width: 1000px;
}

body {
  border:2px solid;
}
html {
  border:2px solid green;
  overflow:hidden;
}

如果将<div class="one">Hello World</div> <div class="two">Hello World</div>更改为body，您会发现宽度会随着内容的增加而增加（不再inline-block）：

width:100%

div {
  border: 1px solid red;
}

.two {
  width: 1000px;
}

body {
  border:2px solid;
  display:inline-block;
}
html {
  border:2px solid green;
}

Answer 3

在实践中，所有块元素都采用其父元素的with，因此在您的示例中，div.one是采用body的with，并且由于主体没有特定的宽度，因此它占用viewport（而不是html元素）的宽度。

div.two元素具有特定用途，而不会影响（body）的父元素。

查看此链接： https://www.w3schools.com/html/html_blocks.asp https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth

当有水平滚动时，为什么不将元素扩展到孩子的显式宽度

3 个答案: