携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
前言
在网页中，常常会有这样一种情况，当你的内容超出盒子的宽高会导致内容溢出盒子，这是css为了减少“数据损失”发生的结果，“数据损失”指的是当你的内容溢出盒子导致其消失。下面我们通过一个例子来看看css默认针对溢出的行为。
CSS的默认处理溢出的行为
<div class="box">
<p>志坚者,功名之柱也。登山不以艰险而止,则必臻乎峻岭。这里是溢出的内容</p>
</div>
.box {
width: 100px;
height: 100px;
border: 1px solid grey;
}
可以看到，css似乎阻止了内容被隐藏而用一种较不整洁的方式是内容超出盒子，这是因为css不会隐藏你的内容，因为隐藏掉数据通常会造成用户的困扰，它也不会改变用户预设的盒子宽高值使盒子“撑大”。但是，如果你需要控制溢出元素的表现且不改变盒子原有的尺寸，css也提供了几种方式。
用css控制溢出的表现
overflow属性
首先，从字面意思“溢出”上来讲，这个属性针对给出了溢出的方式。它有上面所展示的默认形式visible意为可见的，即将溢出的内容“可见”，而相反hidden就是将溢出的内容隐藏起来。下图就是设置为“hidden”的结果。
还有一种方式就是设置为scroll显示滚动条，但要注意这种方式会一直显示滚动条，而且在x、y两个方向都会显示。
因为本例是在y方向上溢出，如果只想在y轴显示滚动条可以通过
overflow-y:scroll;。overflow是简写属性，只设置一个值的话就是同时设置了x、y方向的值。两个值的话就是分别设置overflow-x与overflow-y的值。
但我们可能会觉得当文字不足以溢出盒子时滚动条会比较多余，这个时候就可以设置overflow:auto;由浏览器决定是否显示滚动条，一般在足以引出溢出内容的时候会这么做。
总结
本文我们通过简单的例子了解了溢出是什么还有当溢出时有几种处理的方式，下文我们将会讲如何通过值和单位去调整元素的尺寸。
