细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
发布时间：2014-07-21 17:09:53 作者：佚名 
我要评论
我要评论overflow-x和overflow-y的属性值可以查到一大堆，并没有详细说明各属性值的效果，今天我就说一下
大家可以发现，上网站上查询之后会得到overflow-x和overflow-y的一大堆属性值，但很多网站并没有详细说明各属性值的效果，我们今天细说一下。
各属性值如下：
visible：默认值，不裁剪内容，可能会显示在内容框之外
hidden：裁剪内容 - 不提供滚动机制
scroll：裁剪内容 - 提供滚动机制
auto：如果溢出框，则应该提供滚动机制，否则正常显示
no-display：如果内容不适合内容框，则删除整个框，但目前该属性值不被支持
no-content：如果内容不适合内容框，则隐藏整个内容，但目前该属性值不被支持
这里值得再细说一下的是visible。我们一般会给overflow-x和overflow-y各分配一个属性值，来分别规定水平方向和竖直方向的显示方式，visible只有和visible搭配才会有那种“完全显示而显示在框外”的效果，否则都等同于scroll，不过一般情况下，盒子在一个方向上的尺寸小于51px时不会显示滚动条。当然，这里没有考虑no-display和no-content，因为这两个目前不被支持，所以等同于赋了默认值，即visible。
各属性值如下：
visible：默认值，不裁剪内容，可能会显示在内容框之外
hidden：裁剪内容 - 不提供滚动机制
scroll：裁剪内容 - 提供滚动机制
auto：如果溢出框，则应该提供滚动机制，否则正常显示
no-display：如果内容不适合内容框，则删除整个框，但目前该属性值不被支持
no-content：如果内容不适合内容框，则隐藏整个内容，但目前该属性值不被支持
这里值得再细说一下的是visible。我们一般会给overflow-x和overflow-y各分配一个属性值，来分别规定水平方向和竖直方向的显示方式，visible只有和visible搭配才会有那种“完全显示而显示在框外”的效果，否则都等同于scroll，不过一般情况下，盒子在一个方向上的尺寸小于51px时不会显示滚动条。当然，这里没有考虑no-display和no-content，因为这两个目前不被支持，所以等同于赋了默认值，即visible。
相关文章
- 当块元素想呈现该元素内部内容不换行或者超过该元素的部分隐藏起来2010-03-05
标题长度溢出时，自动显示为省略“...”的Css text-overflow
内容超出后自动隐藏并加省略标记(...)引号的Css text-overflow:ellipsis; o...2011-07-27css overflow与text-indent:-999em 字体隐藏
css overflow与text-indent:-999em 字体隐藏,需要的朋友可以参考下。2010-03-18CSS:用overflow代替left截取指定长度字符串-CSS教程-网页制作-网页教学
为了防止文章标题过长超过容器(td,div)宽度而显示成多行，我们通常要对标题进行处理让其显示在一行，通常使用的方法有两种：一种方法是在客户端用CSS设置容器的overflow属2008-10-17CSS教程:导致一些问题的overflow-CSS教程-网页制作-网页教学网
overflow有问题吗？没问题。那为什么说要慎用呢？因为有时会导致一些问题。。。 关于overflow:auto的，很多人贪他书写方便，直接用来清除浮动。但是Firefox使用overflow:au2008-10-17css overflow溢出隐藏(文字溢出时的自动隐藏处理)
css溢出隐藏一般用于当内容太大以至于无法适应指定的区域时，通过设置css下的overflow属性来隐藏其内容2013-03-07标签增加CSS的overflow属性来清除浮动-CSS教程-网页制作-网页教学网
这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。2008-10-17- 网页制作Webjx文章简介：文字隐藏应用广泛，但常用的方法没有什么亲和力。 文字隐藏应用广泛，但常用的方法没有什么亲和力。 常用文字隐藏方法的缺陷：2009-04-02
CSS--overflow:hidden在项目实例中使用心得分享
大家对CSS属性中overflow:hidden并不陌生，至于它的应用，在下文中列出我在项目中，运用到此属性的例子，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-04css中position:relative和overflow:hidden之间的问题
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成2013-09-04
最新评论