来自 武汉网络推广 2020-05-23 14:44 的文章

快速认识CSS中的overflow属性

  lilian :非常棒的插件!要是能将自定义字段的外链也能转成内链就更好了,很多人需要这个功能啊,等大神加入啊!

  千杯 :真是充满了岁月痕迹的博客啊……是什么让你这一年里变化这么大,简直是质变啊,量的积累肯定也有吧

  千杯 :难得一见做这么久个人博客的人了,膜拜一下,我的域名也快10年了,然而用的时间并不多,相比之下比较惭愧

  即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的表现。例如,如果你没有给一个盒模型指定一个高度,那么它就会随着内容的增加变得越来越高。但是如果当你为盒模型指定一个高度、而其内部的内容不能与其完全匹配时又会怎么样呢?这时就要用到CSS中的overflow属性了,它允许你来设定如何处理多余的内容。

  如果你没有设定overflow属性,其默认值就是visible。因此,一般意义上说没有必要刻意声明其属性值为visible,除非是要覆盖基之前继承的属性。

  和默认属性visible功能恰恰相反的属性是hidden,它会隐藏掉所有超出盒模型之外的内容。

  对于动态内容和解决可能由于overflow影响布局的问题,它显得十分有用。但是,在大脑中一定要有这样一个意识,就是使用方法来隐藏文字不利于页面的可用性。例如,用户将默认字体设置到比你预计得要大时,就会有内容溢出,这些内容将会从用户的视野中消失。

  把overflow的值设为scroll,可以防止盒模型内的内容溢出到外围,但是它提供了一个滚动条,通过它可以查看盒内部的所有内容。

  需要注意的是,设定此值后,在盒模型的水平、垂直两个方向都会出现滚动条,即使其内容只需要一个就足够了。

  最不可思议的是,使用overflow属性的多数情况不是为了处理溢出内容,而是用来清除浮动。设置overflow并不会清除元素本身的浮动,元素是自身来清除浮动的。这就意味着,设置了overflow属性(auto或者hidden)的元素,在其高度未设定的情况下会随着其内部浮动元素的增大而增大。

  Firefox是放置在盒模型的外部,而IE则是内部。我相信在这一点上只有IE才是正确的(它的确应该出现在盒模型的内部)。

  IE 6、7、8中,overflow为visible时,它会在水平方向扩展宽度直到显示出所有的内容为止(例如一张图片)。在浮动多栏布局中这是一个让人头疼的问题,一栏的自动扩展会把其它栏挤到下去,更严重的情况下会打乱整个布局。

  在老式的IE中是可以的,但是现在不行了。像多数表单元素一样,滚动条不能使用CSS来设定样式。我不能说这样是好还是不好,但是整个亚博yabo网页登录的内容都被滚动条包围着的确很难看。如果你需要设定滚动条的样式,那么你最好使用JavaScript。

  无论是否必要,IE总会显示垂直滚动条。这里可以完美解决这个问题,但并不是任何情况下都需要。想在IE中移除掉它,可以给body设置overflow为auto。

  “Firefox是放置在盒模型的外部,而IE则是内部。我相信在这一点上只有IE才是正确的(它的确应该出现在盒模型的内部)。”

  你对CSS2.1的overflow model定义可能存在一些误区,当然是特指滚动条自身的放置位置这个问题,一年以前在蓝色论坛上我就同学们对此FF3.0的解析疑问做过阐述(该帖我一时还没翻着)。

  ——这时视觉上应该是一个400px宽、100px高的容器(包含padding,border除外),这点应该毫无疑问,接下来:

  OK,如果你理解了,但还有一个可能存在的问题——浏览器的根元素的滚动条如何放置?对此,原文特别做了强调:

  通过长期的浏览器应用实践,CSS2.1在原CSS2的规范原文上做了相当多的修正和补充,特别是一些细节上CSS2留下来的悬疑,而这些不完善的部分是当初CSS2规范的制定者们很难确定或预见到的(那时完全缺乏浏览器的实践)。

  而mozzilla为标准的实现做出了相当多的贡献,包括“得罪”那些开发者的已有实现经验和直觉经验——毕竟严谨的工程学规范最终是依赖细致和甚微的模型推导,而不是直觉经验。

Tags:武汉seo
  • 上一篇:AJAX β版发布