??xml version="1.0" encoding="utf-8" standalone="yes"?>
对于div
1.QIE览器)white-space:normal; word-break:break-all;q里前者是遵@标准?/strong>
#wrap{white-space:normal; width:200px; }或?wrap{word-break:break-all;width:200px;}eg.<div id="wrap">ddd1111111111111111111111111111111111</div>
效果Q可以实现换?/p>
2.QF(tun)irefox览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;}或?wrap{word-break:break-all;width:200px; overflow:auto; }eg.<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果Q容器正常,内容隐藏
对于table
1. (IE览?使用样式table-layout:fixedQ?/strong>
eg.
<style>.tb{table-layout:fixed}</style><table class="tbl" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果Q可以换?/p>
2.(IE览?使用样式table-layout:fixed与nowrap
eg.
<style>.tb {table-layout:fixed}</style><table class="tb" width="80"><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果Q可以换?/p>
3. (IE览?在用百分比固定td大小情况下用样式table-layout:fixed与nowrap
<style>.tb{table-layout:fixed}</style><table class="tb" width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果Q两个td均正常换?/p>
3.(Firefox览?在用百分比固定td大小情况下用样式table-layout:fixed与nowrap,q且使用div
eg.
<style>.tb {table-layout:fixed}.td {overflow:hidden;}</style><table class=tb width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
q里单元格宽度一定要用百分比定义
效果Q正常显C,但不能换行(注:(x)在FF下还没有能容器内容换行的好Ҏ(gu)Q只能用overflow多出的内容隐藏Q以免媄响整体效果)如果面制作的时候遇到定义的CSS不v作用Q你可能遇到了CSS优先U的问题。CSS优先U在CSS里算是比较难懂的部分Q不同权重的CSS选择器有可能是你出错的原因Q所以作为页面开发h员必M解CSS优先U特性?/p>
CSS优先U特性概qͼ(x)
1. 通过优先U计,让浏览器先解析哪条CSS规则?br />
2. 优先U特性经常是你定义的CSS规则不v作用的原因,虽然你认v了作用,然而却不是?br />
3. 每个选择器都有它的优先层次?br />
4. 如果两个规则同时作用于一个元素,优先U高的获胜?br />
5.优先U特性可以分为四c:(x)inline styles, IDs, classes+attributes and elements.
6.英文好的可以看下q两文章, CSS Specificity Wars?a >CSS Specificity for Poker Players
7.如果选择器有两个{相同的|后面的g(x)覆盖前面的倹{?br />
8.如果选择器有{不同的|以等U高的算Q比?important?br />
9.拥有更多优先Ҏ(gu)选择器的规则更具有优先特性?br />
10.后面的规则肯定会(x)覆盖前面相同的规则?br />
11.内嵌的CSS规则优先U特性最高?br />
12.CSS文g里,ID的优先Ҏ(gu)最高?br />
13.惌增加优先U,可以使用ID?br />
14.class比elementU别高?br />
15.选择器分为四个别,计算方式 0,0,0,0?br />
16.推荐一个CSS优先U计器Q?a >CSS Specificity Calculator.?/p>
什么是优先U特?/strong>
优先U计是Z军_览器解析哪条规则?#8220;优先U特性的权重关系CSS的显C?#8221;Understanding Specificity Q明白优先Ҏ(gu))?/p>
选择器的优先U特性决定了同一个元素多条规则下哪条规则实施?a >Selector Specificity Q选择器优先Q?/p>
每个选择器都有优先Q两个选择器作用与同一个元素,优先U高的获胜?/p>
CSS优先U别:(x)
1. Inline styles 内嵌面的CSS样式Q比?lt;h1 style=”color:#000″></h1>
2.IDs 比如#myid
3.Classes, attributes and pseudo-classes 比如 .classes, [attributes]:hover, :focus
4.Elements and pseudo-elements 比如 div,p,h1,包括:before?after
怎样量优先U?
内嵌的ؓ(f)1000QID?00Q?strong>Classes, attributes and pseudo-classes?0Q?strong>Elements and pseudo-elements ??/p>
body #content .data img:hover q里的特性gؓ(f) 0,1,2,2
下面q张星球大战的图片也许能帮助你记忆:(x)
来测试下?/strong>
1 | * { } | 0 |
3 | li:first-line { } | 2 (one element, one pseudo-element) |
5 | ul ol+li { } | 3 (three elements) |
7 | ul ol li.red { } | 13 (one class, three elements) |
9 | style=”” | 1000 (one inline styling) |
11 | div p { } | 2 (two HTML selectors) |
13 | div p.sith { } | 12 (two HTML selectors and a class selector) |
15 | body #darkside .sith p { } | 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) |
实际l验Q?/strong>
1. 使用LVHA定义链接Q即link-visited-hover-activeQ参考[Link Specificity]
2. 如果不是Z兼容览器,最好不要?!important
3. 使用ID让特性更具体Q比如a.high写成 ul#blog li a.high
CSS工具与资 英文好的ȝ?/p>
CSS Specificity for Poker Players
CSS specificity calculator
Understanding Specificity Tutorial
Cascade Inheritance: Specificity
CSS 2.1 Selectors Explained
CSS Specificity Bugs in IE
CSS Structure and Rules
Specificity
<?php for ($i=10; $i>0; $i--) { echo $i; flush(); sleep(1); } ?>
该函数将当前为止E序的所有输出发送到用户的浏览器?/p>
上面的这D代码,应该隔一U钟输出一?i。但是实际中却不一定是q样。有可能是等?0U钟后,所有的输出同时呈现出来?/p>
好,我们来改一下这D代码,Ҏ(gu)
<?php ob_end_clean();//修改部分 for ($i=10; $i>0; $i--) { echo $i; flush(); sleep(1); } ?>
嘿,加了q一句ob_end_clean();,居然O(jin)K了。实际上Q我们把ob_end_clean()换成ob_end_flush()也一样OK?/p>
我再来改一攏V?/p>
<?php for ($i=10; $i>0; $i--) { echo $i; ob_flush();//修改部分 flush(); sleep(1); } ?>
q行一下,是不是发?i也隔一U输Zơ了Q这是ؓ(f)什么呢Q?br /> 别急,我们来看看php.ini?/p>
打开php.ini,搜烦output_bufferingQ我们会(x)看到cMq样的设|?output_buffering = 4096。正如它的名字output_buffering一Pq个讄的作用就是把输出~冲一下,~冲大小?096bytes.
在我们的W一D代码里Q之所以没有按预期的输出,正是因ؓ(f)q个output_buffering把那些输出都~冲了。没辑ֈ4096bytes或者脚本结束,输出是不?x)被发送出ȝ?/p>
而第二段代码中的ob_end_clean()和ob_end_flush()的作用,是l止~冲。这样就不用{到?096bytes的缓冲之后才被发送出M?/p>
W三D代码中Q用了一句ob_flush(),它的作用是把缓冲的数据发送出去,但是q不?x)终止缓Ԍ所以它必须在每ơflush()前用?/p>
如果不想使用ob_end_clean(),ob_end_flush()和ob_flush()Q我们就必须把php.ini里的output_buffering讑־_,例如设ؓ(f)0。需要注意的是,如果你打在脚本中用ini_set(”output_buffering”,”0″)来设|,那么请停下来吧,q种Ҏ(gu)是不行的。因为在脚本一开始的时候,~冲讄已l被载入Q然后缓冲就开始了?/p>
可能你会(x)问了Q既然ob_flush()是把~冲的数据发送出去,那么Z么还需要用flush()???直接用下面这D代码不行吗Q?
<?php for ($i=10; $i>0; $i--) { echo $i; ob_flush(); sleep(1); } ?>
h意ob_flush()和flush()的区别。前者是把数据从PHP的缓冲中释放出来Q后者是把不在缓冲中的或者说是被释放出来的数据发送到览器。所以当~冲存在的时候,我们必须ob_flush()和flush()同时使用?/p>
那是不是flush()在这里就是不可缺的呢?不是的,我们q有另外一U方法,使得当有数据输出的时候,马上被发送到览器。下面这两段代码是不需要用flush()了。(当你把output_buffering设ؓ(f)0的时候,qob_flush()和ob_end_clean()都不需要了Q?/p>
<?php ob_implicit_flush(true); for ($i=10; $i>0; $i--) { echo $i; ob_flush(); sleep(1); } ?>
<?php ob_end_clean(); ob_implicit_flush(true); for ($i=10; $i>0; $i--) { echo $i; sleep(1); } ?>
h意看上面的ob_implicit_flush(true)Q这个函数强制每当有输出的时候,卛_把输出发送到览器。这样就不需要每ơ输出(echoQ后Q都用flush()来发送到览器了?/p>
以上所诉可能在某些览器中不成立。因为浏览器也有自己的规则。我是用Firefox1.5,IE6,opera8.5来测试的。其中opera׃能正常输出,因ؓ(f)它有一个规则,是不遇C个HTML标签Q就l对不输出,除非到脚本结束。而FireFox和IEq算比较正常的?/p>
最后附上一D非常有的代码,作者ؓ(f)PuTTYshell。在一个脚本周期里Q每ơ输出,都会(x)把前一ơ的输出覆盖掉?br /> 以下代码只在firefox下可用,其他览器ƈ不支持multipart/x-mixed-replace的Content-Type.
<?php header('Content-type: multipart/x-mixed-replace;boundary=endofsection'); print "\n--endofsection\n"; $pmt = array("-", "\\", "|", "/" ); for( $i = 0; $i <10; $i ++ ){ sleep(1); print "Content-type: text/plain\n\n"; print "Part $i\t".$pmt[$i % 4]; print "--endofsection\n"; ob_flush(); flush(); } print "Content-type: text/plain\n\n"; print "The end\n"; print "--endofsection--\n"; ?>