zoom:1 和 overflow:hidden

firefox chrome下的overflow:hidden 有时候的作用 相对于 IE 的zoom:1(也可以用height:1%代替,因为zoom:1毕竟不能通过W3C)

overflow:hidden通常理解下是裁剪超出内容的,实际用途它还有很多用处,比如可以防止当前区域面积被别的元素侵犯

比方一个元素A的所有子元素都是float浮动的,那么这个元素A是没有高度的,尽管他的子元素是有高度的。

那么这个元素A的兄弟元素B可能和他的子元素区块有重合的地方,相当于被其他元素侵犯了。

这时给A加上overflow:hidden,他就会有自己的高度,此高度的范围包含了所有子元素(取其子元素最高的那个高度)。

这时元素A就不会和别的元素区块发生重合被侵犯的现象。很多浮动元素的父元素加上overflow:hidden。都是这个目的,是为了给予高度,并不是真正的防止溢出。

 

[html]

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>overflow:hidden的作用</title>  
  6. <style>  
  7. *{  
  8.     margin:0;  
  9.     padding:0;  
  10.     font-size:12px;  
  11. }  
  12. .a{  
  13.     width:220px;  
  14.     background:#333;  
  15.     overflow:hidden;/*删除这里就可以看到它的作用*/  
  16. }  
  17. .aa{  
  18.     background:#CCC;      
  19.     float:left;  
  20. }  
  21. .bb{  
  22.     background:#666;      
  23.     float:left;  
  24.     height:50px;  
  25. }  
  26. .c{  
  27.     width:200px;  
  28.     height:100px;  
  29.     background:#ff0000;  
  30. }  
  31. </style>  
  32. </head>  
  33.   
  34. <body>  
  35. <div class="a">  
  36.     <div class="aa">浮动元素</div>  
  37.     <div class="aa">浮动元素</div>  
  38.     <div class="aa">浮动元素</div>  
  39.     <div class="bb">浮动元素</div>  
  40. </div>  
  41. <div class="c">  
  42. </div>  
  43. </body>  
  44. </html>  


 

overflow:hidden清除浮动造成影响的作用不仅仅在于可以让浮动元素撑起父容器

替换其中的width:200px;为overflow:hidden;

一样可以让IE8 firefox chrome等浏览器表现的和IE6触发hasLayout一样,当然,这个不适用于IE6,所以如果要所有浏览器表现一致,zoom:1;和overflow:hidden要同时使用

 

但是实际上,用height:1%;代替zoom:1;更好,因为它可以通过W3C,我用zoom:1;做例子,是因为之前zoom:1被用的更广泛些,大家容易理解。

下一主题:不会编程?Webflow 让你网页设计无压力 上一主题:微伯科技2014年端午节放假通知
        Valid CSS!
  • 客服热线:周一至周五 9:00-18:00
  • 0755-28121545
  • 咨询信箱:[email protected]
555