简述CSS overflow 属性

       在利用css进行网页设计时,许多新手由于对块元素的高度设置把握不准,当实际内容的高度大于块元素时，导致内容溢出元素框的情况出现。对于这种情况我们有什么办法解决呢？那就是使用overflow属性。下面小编为大家介绍一下这个属性的相关内容。

　　一、overflow属性

　　首先这个属性属性规定当内容溢出元素框时发生的事情。

　　二、overflow属性值

　　overflow属性值分别有五个：visible、hidden、scroll、auto、inherit。为了便于测试这五个值的效果,我们先创建一段基础代码。

　　代码如下:

　　运行效果如下:

　　接下来我们分别解释一下它们的用法。

　　首先要对div元素定义overflow属性,我们可以这样设置:

　　div

　　{

　　background-color:#00FFFF;

　　width:150px;

　　height:150px;

　　overflow:/*具体属性值*/

　　}

　　1.visible

　　visible为overflow属性的默认值,当运用这个值时,溢出的内容不会被修剪,但会呈现在元素框之外。效果与基础代码一样。

　　2.hidden

　　hidden这个值的作用是内容会被修剪，并且溢出的内容是不可见的。

　　其效果为

　　3.scroll

　　这个值的效果是内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

　　其效果如下

　　注意: 如果值使用scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

　　4.auto

　　这个值代表如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

　　其效果为

　　5.inherit

　　这个值代表规定应该从父元素继承overflow属性的值。

　　运行效果为

　　为什么会这样呢?这是因为我们并没有对div的父元素body的overflow进行定义,默认使用visible,所以div元素继承了body元素,溢出的内容呈现在元素框之外。

　　以上就是overflow属性的全部内容，它会同时作用于水平和垂直方向，如果想在两个方向上有不同的处理方式，我们就可以用overflow-x和overflow-y来单独控制，有效值跟本教程所提的一致。另外，对于长单词撑破容器的情况，我们还需要配合前面课程提到的word-wrap属性来强制换行防止不必要的溢出。所以说，我们学习了CSS的相关属性后要学会灵活综合运用，这样才能在学习或工作中运用自如！