• CSS 的overflowhidden 属性详细解释


    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

         一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。 

    这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验。

     1  #box{ 
     2           500px; 
     3           background:#000; 
     4           height:500px;
     5  } 
     6 #content { 
     7           float:left; 
     8           600px; 
     9           height:600px; 
    10           background:red;
    11  } 

       box这个div加了一个overflow:hidden这个属性解决了这个问题。

        我们知道overflow:hidden这个属性的作用是隐藏溢出,给box加上这个属性后,我们的content 的宽高自动的被隐藏掉了。

        另外,我们再做一个试验,将box这个div的高度值删除后,我们发现,box的高度自动的被content 这个div的高度值给撑开了。

        说到这里,我们再来理解一下“浮动”这个词的含义。

        我们原先的理解是:在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当content 这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了box这个div,也就是说,此时的content 的宽高是多少,对于已经脱离了的box来说,都是不起作用的。

        当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给box这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。

        当我们没有给box这个div设置高度的时候,content 这个div的高度,就会撑开box这个div,而在另一个方面,我们要注意到的是,当我们给box这个div加上一个高度值,那么无论content 这个div的高度是多少,box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

  • 相关阅读:
    观察者模式
    hdu 4712 Hamming Distance bfs
    leetcode Sum Root to Leaf Numbers(所有路径之和)
    Oracle实用-01:绑定变量
    jQuery实现AJAX定时刷新局部页面实例
    给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化
    jquery的ajax同步和异步
    报表技术
    告别.NET生成报表统计图的烦恼
    浅谈ASP.NET报表控件
  • 原文地址:https://www.cnblogs.com/hegaiying/p/5937808.html
Copyright © 2020-2023  润新知