- Welcome to .
作者 admin
- 八月 26, 2009, 02:44:57 上午多谢！
加你到 自由发言用户 了。
加你到 自由发言用户 了。
作者 907486
- 八月 26, 2009, 02:39:18 上午overflow:hidden详解
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于"浮动"这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
<div id="wai">
<div id="nei"></div>
</div>
这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
#wai{ width:500px; background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}
可以看到，我给nei这个id加了一个浮动，我们常规的理解是，我们允许nei这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当nei这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中，都是500。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的nei的宽高自动的被隐藏掉了。另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被nei这个div的高度值给撑开了。
说到这里，我们再来理解一下"浮动"这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！
也就是说，当nei这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai 这个div，也就是说，此时的nei的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于"浮动"这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
<div id="wai">
<div id="nei"></div>
</div>
这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
#wai{ width:500px; background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}
可以看到，我给nei这个id加了一个浮动，我们常规的理解是，我们允许nei这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当nei这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中，都是500。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的nei的宽高自动的被隐藏掉了。另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被nei这个div的高度值给撑开了。
说到这里，我们再来理解一下"浮动"这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！
也就是说，当nei这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai 这个div，也就是说，此时的nei的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。
作者 907486
- 八月 25, 2009, 05:48:18 上午<img class="floatleft" id="smflogo" src="/Themes/default/images/smflogo.gif" alt="Simple Machines Forum" />
/Themes/default/style.css
印象中好像在相应的css文件加入
{
overflow:hiden;
}
可能起作用。
/Themes/default/style.css
印象中好像在相应的css文件加入
{
overflow:hiden;
}
可能起作用。