css - 究竟溢出在css中做了什么？

Question

我不明白它到底是什么意思以及两者之间的区别overflow:auto;我overflow:scroll; 只知道当溢出被剪辑时，它们都会向元素添加一个滚动条以查看其余内容

Answer 1

overflow:scroll;将始终添加滚动条，即使没有可滚动的内容。如果滚动条被剪裁，溢出自动将放置滚动条，如果未剪裁则不会。看看我在这里做了什么？类 1 和 4 设置为overflow: auto;但具有不同长度的内容，但 1 显示滚动，而另一个不显示。第 2 类和第 3 类也有不同长度的内容，但总是会显示滚动条。

.one {
  overflow: auto;
  width: 150px;
  height: 150px;
}

.two {
  overflow: scroll;
}

.three {
  overflow: scroll;
}

.four {
  overflow: auto;
  width: 150px;
  height: 150px;
}

<div class="one">
hello one af afadsfadsf asdfasdf asdf adsfasdf asf asf asdf afa dfdaf asdf asf asf asfasdf asdf asdf sdfads fsadfadsf sdafadfasdfadsfadsfa fafsdadsfadfdsaf adsf asdfasd fasdf asdf dsafasdf asdf asf asf adf asdfadsf adsfa sdfsadf asf sadf sadf 
</div>
<br>
<br>
<div class="two">
hello two
</div>
<br>
<br>
<div class="three">
hello three af afadsfadsf asdfasdf asdf adsfasdf asf asf asdf afa dfdaf asdf asf asf asfasdf asdf asdf sdfads fsadfadsf sdafadfasdfadsfadsfa fafsdadsfadfdsaf adsf asdfasd fasdf asdf dsafasdf asdf asf asf adf asdfadsf adsfa sdfsadf asf sadf sadf 
</div>
<br>
<br>
<div class="four">
hello four
</div>