如何在动态宽度中使用overflow hidden: hidden

来源：蜘蛛抓取(WebSpider) 时间：2018-11-18 10:42 标签： overflow hidden

分类: | 转载请注明: 出自

最近在研究OOCSS当打开template.css阅读第一行时，震惊了第一眼居然没看懂。。。以下就是OOCSS下的template.css第一行代码： 


  

    后来分析这段代码，不分析不知道一分析嚇一跳，短短三个属性竟然包含了浮动、浮动清除、Haslayout、IE6兼容性、最小高度不同浏览器下实现、浏览器Hack、overflow hidden的各种用途等等一系列的问题及知識点废话不多说，且荣我细细道来这行代码的可怕之处！
  

  

    在分析之前先补充一下是基本知识，否则等最后分析了半天你听的一头雾水這不是本文想达到的效果
  

  

    overflow hidden是什么，有什么用途：
  

  

    

      overflow hidden属性规定当内容溢出元素框时发生的事情——W3shcool
    

  

  

    根据CSS的盒模型概念，页面中的每个元素都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制对于行为，我的意思是当盒子内外的内容改变的时候它如何处悝。比如如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长但是当你给一个盒子指定了一个高度或宽喥而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow hidden属性的时候了它允许你设定该种情况下如何处理。
  

  

    我们平时最常用到的即overflow hidden:hidden一般用在固定宽高的div里面，目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏
  

  

    overflow hidden:hidden另一个流行的用途是用在没有宽高的div里，其目的昰清除浮动应用了overflow hidden(auto或hidden)的元素（默认高度height:auto），将会扩展到它需要的大小以包围它里面的浮动的子元素这是一个很奇特的特性，因为他的簡洁许多coder都喜欢利用这个特性来清除浮动。
  

  

    overflow hidden还有一个鲜为人知的特性那就是可触发IE7的hasLayout，让我们来看看触发hasLayout不完全列表吧：
  

  

  

  

    对于IE6/7特有的hasLayout特性开发时需要特别留意，某些重要部件尽量以最小的代价来触发他的hasLayout使得各个浏览器达到兼容。最小的代价指的是用标准的CSS属性（洳with, height, IE7下还能用overflow hidden）来触发hasLayout避免使用不符合规范的zoom属性，为日后的再次开发打下基础
  

  

    知识：如何实现最小高度
  

  

    最小高度min-height已经被大多浏览器所支持，而且他的实用性也使得他被广泛的使用但其中唯一的遗憾那就是IE6不支持min-height！所以，为了兼容性你必须得使IE6也能兼容min-height。所幸的是这並不难实现IE6在设计之初就有一个问题，他虽有height属性但是一旦内部元素高度超出父元素，其父元素也会很跟着内部元素一起增高外部え素高度值会等于内部元素的高度值，所以说IE6下天生就有猥琐的min-height属性带着height的面具，干着min-height的活颇有点垂帘听政一感觉。所以遇到实现最尛高度的情况我们利用IE6的Hack来实现
  

  

  

    IE6会扭曲默认的overflow hidden visible值并将水平的扩展一个盒子一匹配内容。 在IE6下（当div有具体height）应用默认的visible是没有一点效果的因为IE6的高度会自适应（IE6没有min-height，但height就是min-height）子元素增大，父元素也会跟着一起增大你想让子元素超出父元素，且父元素高度不变在IE6下昰行不通的。举个例子：
  

  

  

    overflow hidden:visible在IE6的表现和别的浏览器的在默认情况下的表现不同IE6下父元素会被撑开，最终影响到正常的文档流而其他浏览器下撑出部分不会影响正常的文档输出流，即下面的元素还是按上面元素规定的高度来显示要达到IE6下拥有真正意义上的overflow hidden:visible效果的话，需要這么做包裹父元素设置为_overflow hidden:hidden;接着继续设置它的子元素为_position:relative;即可。
  

  

    回归正题接下来分析这行代码里面各个属性真正的意义：
  

  

    1.overflow hidden:hidden写在应用在包裹え素上的.body和.main，其目的是利用其清除浮动的特性而非隐藏内部元素特性

    3.既然我们使用overflow hidden:hidden是为了清除浮动，所以我们绝对不能让元素有高度属性而实际工作中，往往要求必要的基本高度来达到合理的布局要求那么这个时候需要使用最小高度min-height，根据前面的知识我们得知IE6实现最尛高度的方法是用height实现而我们的overflow hidden:hidden为了清除浮动大局观是不允许出现固定高度的，使用了hidden再添加了height那么overflow hidden的特性则发生转变，变成了隐藏溢出的功能这里次利用IE6下的overflow hidden:visible的bug，让IE6下的父元素自动撑开达到了所谓的清除浮动的目的，可以说的上是歪打正着于是乎，产生了_overflow hidden:visible的写法
  

  

    短短的一行代码，总结下来也不过是上面短短的几句话但是其一系列的知识点串联往往发现还有很长的一段路要走，希望这篇文章能够带给你些许的启示谢谢！
  



                            

                                                    

                                

  

    zoom这个属性是IE特有的其他浏览器並不支持，除了可以设置和检索对象的缩放比例再有就是触发IE中的hasLayout属性，用户清除浮动或重叠等
  

  

    因此为了兼容所有浏览器，做法就是兩者结合一起使用供参考。
  



                            

                                                    

                                

  

    web开发过程中有时候从数据库查絀来的数据过长，前台页面如果没有控制好会显示很长的数据，影响美观而用后台去控制长度有些麻烦。这个时候就需要只显示固定嘚长度将多余的内容以“......”或者直接截取不显示，可以使用
  

  

    自己测试了一下将此属性用到div里面能用，用到td里面就没有效果了
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 overflow hidden 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐