显示框的CSS溢出属性示例被剪切到其填充边

Question

根据specs，

  

每当发生溢出时，溢出＆＃39; property指定是否将框剪切到其填充边缘，如果是，则指定是否提供滚动机制来访问任何剪切的内容。

我真的无法绕过这条线。

  

是否将框裁剪到其填充边

任何人都可以为这个陈述给我很好的例子。

由于 DKJ

Answer 1

以下是关于CSS中的盒子模型的信息（查找＆＃34;填充边缘＆＃34;）：https://www.w3.org/TR/CSS21/box.html

填充边缘是由内容及其填充形成的边界。

剪切一些屏幕上的对象意味着切断对象的一部分，通常只要该部分超出其容器的范围。例如，如果您正在玩游戏并且一半建筑物在屏幕外，则该一半被剪裁并且在游戏窗口外部不可见。

因此，剪切到其填充边缘的框意味着如果超出填充边缘，框的任何部分（例如，div中的文本）将被切除。

overflow属性控制当某些内容超出其容器时会发生什么。它可以使滚动条显示，隐藏或显示在容器外部。

Answer 2

这意味着带有溢出和填充的框将包含填充边距内的内容，但显示为更大。请参阅下面的工作示例。

＆＃13;

＆＃13;

#pad {
  padding: 50px;
  background-color: grey;
  height: 100px;
  width: 200px;
  overflow: auto;
}
#noPad {
  background-color: green;
  height: 100px;
  width: 200px;
  overflow: auto;
}

＆＃13;

<div id="pad">
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
</div>
<div id="noPad">
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
  Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet Lorum Ipsum Dolar Sit Amet
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

它指的是CSS盒子模型。这是它的直观表示：

如果内容的大小超过元素的填充边缘，则会发生剪切，overflow:;属性允许您为其指定滚动条或使用指定的不同选项{{ 3}}

此处，内容溢出div的大小（即超出其填充边缘）并指定overflow属性（scroll）：

div {
  height:200px;
  overflow-Y:scroll;
  border:5px solid red;
}

<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>