Overflow属性入门

溢出（overflow）
当内容超出所在容器的范围时，就会超出容器显示，该现象称为溢出。不同的属性值对应不用的效果，一般利用visible/scroll/auto/ hidden属性值来显示内容。
overflow属性值：
visible
scroll
auto
hidden

visible（默认值）
visible属性值是默认值，内容不会被修剪，呈现在元素框外。


元素默认情况下，overflow的属性值就是visible。

hidden（溢出内容隐藏）
hidden可以隐藏溢出容器的内容，不让溢出内容显示在容器外。


由此可见overflow : hidden; 这个属性值可以隐藏溢出的文本，通常在单行文本显示省略号处搭配使用。

scroll
应用scroll属性值时，内容会被修剪，但浏览器会显示滚动条以便查看内容。


如图所示，应用overflow : scroll; 属性，右侧会出现滚动，以便查看内容。常用于浏览器右下角区域多条广告。同时，overflow-x:hidden;有隐藏横向滚动条的效果；overflow-y:hidden;有隐藏纵向滚动条的效果。

auto
应用scroll属性值,如果内容被修剪，则浏览器会显示滚动条。


如图所示，运用overflow:auto;属性值时，内容文本超出容器，会在容器右侧显示滚动条，常应用于一系列大小图的点击查看。