OverFlow – 一个秘密武器
来源:Time Machine 发布时间:2010-09-25 12:51:00
如果你已经理解了block formatting contexts那么请继续,否则请先看看这篇文章。
Overflow能够做一些很牛掰的事情,比如:
创建BFC (block formatting contexts via W3c css2.1)
清除浮动
生成块级元素
overflow属性一旦被指定,那么一个新的BFC就被创建了。这意味着什么呢?它改变了block和浮动元素的交互方式。它不再围绕浮动元素,而是变成一个narrower。
[P没有用overflow]你可以把一个页面想象成大的集装箱,这个集装箱里装的货物就是HTML元素。在现实生活中为了避免 不同人的货物相互混淆,都是把货物打好包装再装入集装箱,这样的话无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。
[P有用overflow:hidden]你可以把一个页面想象成大的集装箱,这个集装箱里装的货物就是HTML元素。在现实生活中为了避免 不同人的货物相互混淆,都是把货物打好包装再装入集装箱,这样的话无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。
这不是一个hack,在w3c标准中有明确的说明:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
那么该如何学以致用呢?
拥有新FC( formatting context)的块级元素会占去一行中所有的剩余空间,只给定位了的浮动元素留下空间。在原文作者的开源项目OOCSS中,有两种方式去使用FC:
主内容列 -添加FC意味着主内容列将占去除左右列之外的所有空间。这意味着,在一个模板下,只需简单的删除多余的那列,不用做其它任何更改你就可以很轻易的将布局从三列变为两列。CMS开发者会非常喜欢这个特性的。
在Firebug下玩玩这个模板。
试着将“liquid”class增加到“page”元素中。
从HTML中添加或删除一列。
用文档中列出的附加class去扩展一个列对象。
尝试在Firebug中直接改变列的宽度。
网格 -任何开发过网格系统的人都知道sub-pixel舍入错误所带来的痛苦。浏览器不知道如何处理33.3像素,所以他们都会做不同的事情。YUI利用“列”之间的“槽”解决了这一差异,但我们也可以在单元内部隐藏这一差异。
一个新的BFC可以用来隐藏网格任何一列最后一个单元的尺寸误差。试试这个网格,你会发现当你修改单元的尺寸时,最后的单元会自动伸缩,以适应差异。它没有宽度,而且如果拥有新的BFC,它也不会环绕浮动元素。
清除浮动
你肯定听说过清除浮动这码事。人们一直在探讨通过overflow的属性来清除浮动 。有些人认为它是hack,但仔细阅读规范你会发现,规范作者也没能明确它。因为它的最终解释权归浏览器厂商。
为了计算出什么溢出了容器(这些范围应该被隐藏),他们需要知道块的大小。由于这些块都没有给出明确的高度设置,于是浏览器就使用了从块内容中计算出的高度。欲了解更多关于清除的内容 ,请看我和Eric Meyer在他博客里的讨论。
注意事项
溢出可以太大内容(如巨大的图片,pre区域,或表格之类),我现在尝试overflow: auto,到底使用哪个还需要权衡。
原文地址:http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
猜你喜欢
- 格式请使用 gif 或 jpg 或swf (flash)同一组广告请使用一种格式。命名命名方式:宽x高.图片格式x 必须小写 ; 图片格式
- 一般事件事件浏览器支持描述onClickIE3|N2|O3鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClickIE4|N4
- 1、前言 MySQL 是完全网络化的跨平台关系型数据库系统,同时是具有客户机/服务器体系结构的分布式数据库管理系统。它具有功能强、使用简便、
- 问:我想问一下我在重新装完系统以后装SQL Server2000时提示:以前某个程序安装已在计算机上创建挂起的文件操作,运行安装
- 越简单越丰富——极简网页设计视觉呈现技巧如何让杂乱又咄咄逼人的网页变得轻薄简洁而美观,又需保留完整功能、同时很好的区分出重点模块?这往往是让
- 通常我们在制作上图的时候,会分别给四个div加上不同的css属性,来实现中间间隔。但我们更希望的是不需要对html标签做标识,直接能通过cs
- 方法不是主流的。有一组数据,大概10万个左右,每一单位的值不会大于30000,要求按照由大到小的顺序不重复输出。参考无忧cosin的方法后(
- 下面是asp代码实现列出sql数据库中存储过程的功能,可自行添加其它功能:< HTML >< 
- overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义
- 一、问题的提出随着互连网的发展,网站的数量以惊人的数字增加。网站的作用除了给广大网友们提供信息资讯服务外,还应该成为网友们上传与下载文件的场
- 最好也是最简单的办法就是利用Cookie,而不必用到数据库。当然,你愿意用数据库也可以。下面就是利用Cookie来实现的:< 
- 年初的时候收藏过一篇关于mysqlreport的报表解读,和内置的show status,和show variables相比mysqlrep
- 页面中无法看见页面,指向的连接网页无法显示 解决方法:1、首先在Dreamweaver中不能中文作为文件名。连目录名也最好是英文的。2、如果
- 当你要使用data URI scheme的时候,你会发现,虽然他可以使用在绝大多数浏览器上,但无法再IE6和IE7上工作。不过值得庆幸的这一
- 以SQL Server中的Northwind示范数据库为例,利用DTS设计器,进行数据的转移。转移任务的步骤:◆1. 新建目的数据库NOrt
- 大家都用过企业管理器中的--“收缩数据库”,里面的功能的确可以收缩数据库的日志文件(.ldf)和数据文件(.mdf),但都会发现同样的问题,
- 准备工作去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅
- '创建DOM对象set objDom=server.CreateObject("MicroSoft.XMLDom"
- my.ini文件[mysqld]max_allowed_packet = 10M
- 什么情况下用响应缓冲会提高运行速度?例1、脚本引擎与 HTML 之间的切换频繁,对响应流写操作太多,导致性能下降:<table>