CSS中overflow属性使用技巧

你对CSS中overflow属性的用法是否了解，这里和大家分享一下，overflow属性规定如何处理如何处理不符合元素框的内容。

我们提供的服务有：网站设计制作、网站制作、微信公众号开发、网站优化、网站认证、广昌ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的广昌网站制作公司

CSS中overflow属性介绍

overflow属性规定如何处理如何处理不符合元素框的内容。

◆用法如下：

Object.style.overflow=visible|hidden|scroll|auto。

◆参数介绍：

visible：内容不会被修剪，会呈现在元素框之外。

hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：由浏览器决定如何显示。如果需要，则显示滚动条。

◆本例使用overflow来显示溢出元素框的内容：

viewsourceprint?

 
 
 
  
  
  01   
  
     
  
  02   
  
     
  
  03   
  
     
  
  04div{border:thinsolidgreen;width:100px;height:100px;}    
  
     
  
  05   
  
     
  
  06   
  
     
  
  07functionhideOverflow()    
  
     
  
  08{    
  
     
  
  09document.getElementById("div1").style.overflow="hidden";    
  
     
  
  10}    
  
     
  
  11   
  
     
  
  12   
  
     
  
  13   
  
     
  
  14    
  
     
  
  15   
  
     
  
  16Thisissometext.Thisissometext.Thisissometext.    
  
     
  
  17Thisissometext.Thisissometext.Thisissometext.    
  
     
  
  18Thisissometext.Thisissometext.Thisissometext.    
  
     
  
  19

22value="Hideoverflow"/>

相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而增加，发生”脱层”的现象。这种时候就需要用到”overflow:hidden;”这个属性了。表面意思来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。

对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。

overflow:hidden---这样超出部分会自动隐藏，这样做不好的地方是就是这部分的信息显示不完全，比如图片只显示了一部分，但是页面布局不会乱。要注意的是，使用overflow的时候，一定要定义width，百分比或者具体值都可以。（在用ul和li做图片列表排列的时候，也可以用这个，这样避免一些大尺寸图搞乱布局，也可以解决浏览器窗口缩小时，li元素自动回行排列出错的问题）。用overflow:auto，还可以在页面里模仿出IFRAME的效果。

【编辑推荐】

深入学习CSS匹配原理
CSS Sprites样式生成工具用法详解
FireFox和IE中CSS兼容技巧汇总
CSS代码整理及优化七大原则
深入剖析Firefox下 margin-top失效原因与解决方案

网页题目：CSS中overflow属性使用技巧
本文URL：http://www.zyruijie.cn/qtweb/news41/4091.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联