overflow从字面意义上来讲就是溢出的意思唄，换句话说，你有个层，但是里面的内容，图片或者文字要比层大，overflow就是针对这种情况进行处理的。 包含4个属性值，visible,hidden,auto,scroll visible就是超出的内容仍然正常被显示出来。 hidden就是超出的内容被隐藏。 auto是默认值，根据内容剪切或者加滚动条。 scroll就是总加滚动条 | overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。 一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。 这是一个常用的div写法，下面我们来书写样式。大家可以自己做试验 #wai{ width:500px; background:#000; height:500px;} #li { float:left; width:600px; height:600px; background:red;} 可以看到，我给li这个id加了一个浮动，我们常规的理解是，我们允许li这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。 如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在li右侧。 这些在ie6里面是正确的,但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当li这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高,在我的例子中，都是500。 这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。 我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的li的宽高自动的被隐藏掉了。另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被li这个div的高度值给撑开了。 说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！ 也就是说，当li这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai这个div，也就是说，此时的li的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。打个形象的比喻就是当你吃的雪糕脱离你的嘴的时候，雪糕的大小对于你的嘴是没有撑开的作用的（-_-） OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给wai这个div加上overflow:hidden这个属性的时候，其中li等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比雪糕又进入了你的嘴内，雪糕的大小自然又会影响到你张嘴的大小。 这就是overflow:hidden这个属性清除浮动的准确含义。 当我们没有给wai这个div设置高度的时候，li这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论li这个div的高度是多少，wai这个高度都是我们设定的值。而当li的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！ 我相信，通过我的这些文字，大家对overflow:hidden这个属性有了全新的认识。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <style type="text/css"> <!-- *{margin:0px; padding:0px;} #menu { overflow:hidden; margin:10px; width:200px; background:#000000;} #menu h1 { color:#00CCFF; font-family: "宋体"; font-size: 14px; font-style: normal; line-height: 16px; font-weight: normal; font-variant: normal; } #menu li { display:block; padding:10px; width:178px; border:1px solid #CCCCCC; border-top-width:0px; list-style:none;} #menu li a { display:block; width:100%; text-decoration:none;} #menu li a span { display:none; padding:20px 0 0 0; color:#FF9900; font-family: "宋体"; font-size: 12px; font-style: normal; line-height: 16px; } #menu li a:hover { background:#000000;} #menu li a:hover span { display:block; cursor:hand;} --> </style> <body> <ul id="menu"> <li class="end"><a href="#"> <h1>我该怎么做？</h1> <span>面对这样的事实……？</span></a> </li> <li><a href="#"> <h1>暂时就这样做吧！</h1> <span>面对这样的事实……！</span></a> </li> <li><a href="#"> <h1>将来也要这么做！</h1> <span>不管事情发展到如何地步，不管别人怎么看待,不管未来的路有多艰辛，我都要坚定不移的走下去！</span></a> </li> <li><a href="#"> <h1>如果是你你怎么选？</h1> <span>假如这样的事……？</span></a> </li> <li><a href="#"> <h1>也许大家很晕</h1> <span>也许大家很晕，……！</span></a> </li> </ul> </body> </html> |
|
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
