第十三讲 overflow技术详解.pptVIP

PHPChina前端工程师培训 * * 主讲：秦亮 第十三讲 overflow样式详解 概要 overflow样式详解。 overflow清除浮动效用。 overflow跨浏览器兼容问题。 overflow字符截取技术。 13-1 overflow样式详解 13-1-1、overflow属性的作用 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。 overflow属性有四个值：visible (默认), hidden 隐藏, scroll滚动, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。 13-1 overflow样式详解 13-1-2、Visible 如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。 13-1 overflow样式详解 这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如： 一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。 13-1 overflow样式详解 13-1-2、Hidden 默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。 13-1 overflow样式详解 这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。 尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之…… 13-1 overflow样式详解 13-1-3、Scroll 设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。 值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。 13-1 overflow样式详解 13-1-4、Auto overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条 的问题。 13-2 overflow清除浮动效用 设置overflow的一个更流行的用处是清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样： 注意：IE6下此效果失效。 13-3 跨浏览器兼容问题 13-3-1、滚动条在盒子里面还是外面? firefox将其放到盒子外面，而IE则将其放到里面。 (个人认为IE是对的，它应该在里面的)。 13-3 跨浏览器兼容问题 13-3-2、破坏浮动布局 IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！ 13-4 字符截取技术 直接上代码： style * {margin:0; padding:0; list-style:none; } body{font-family: 宋体;font-size: 12px;} #box{width:200px;border:1px green solid;} #box span{display:block;overflow:hidden;float:left; width:156px;*width:180px; /*浏览器兼容问题解决*/ white-space:nowrap; /*取消换行*/ text-overflow:ellipsis;/*just for IE */ } #box:after{content:...;/*for FF*/} /style ********************************************************** body div id=boxspan我是文字，我很长很长很长很长很长很长很长很长很长/span/div /b