posts - 17, comments - 4, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

2007年11月7日

大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!

对于div

1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}eg.<div id="wrap">ddd1111111111111111111111111111111111</div>

效果:可以实现换行

2.(Firefox浏览器)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>

效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed;
eg.

<style>.tb{table-layout:fixed}</style><table class="tbl" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:可以换行

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>

效果:可以换行

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>

效果:两个td均正常换行

3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用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>

这里单元格宽度一定要用百分比定义

效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)

posted @ 2007-11-07 13:57 愚人 阅读(256) | 评论 (0)编辑 收藏

2007年10月10日

     摘要:   阅读全文

posted @ 2007-10-10 11:02 愚人 阅读(233) | 评论 (0)编辑 收藏

2007年10月9日

     摘要:   阅读全文

posted @ 2007-10-09 13:04 愚人 阅读(209) | 评论 (0)编辑 收藏

     摘要:   阅读全文

posted @ 2007-10-09 12:54 愚人 阅读(6984) | 评论 (1)编辑 收藏

     摘要:   阅读全文

posted @ 2007-10-09 12:03 愚人 阅读(814) | 评论 (0)编辑 收藏

     摘要:   阅读全文

posted @ 2007-10-09 11:25 愚人 阅读(381) | 评论 (0)编辑 收藏

2007年9月21日

     摘要: 经常会遇到一个问题——图片自适应,以前的解决方法主要是利用js来实现,其实也可以试试css的expression功能  阅读全文

posted @ 2007-09-21 09:40 愚人 阅读(885) | 评论 (1)编辑 收藏

2007年9月17日

     摘要: 经常会用到表格来显示数据,需要1px的表格,转了一篇文章,可以借鉴一下~  阅读全文

posted @ 2007-09-17 14:33 愚人 阅读(1383) | 评论 (0)编辑 收藏

2007年9月15日

原文:CSS Specificity: Things You Should Know

如果页面制作的时候遇到定义的CSS不起作用,你可能遇到了CSS优先级的问题。CSS优先级在CSS里算是比较难懂的部分,不同权重的CSS选择器有可能就是你出错的原因,所以作为页面开发人员必须了解CSS优先级特性。

CSS优先级特性概述:

1. 通过优先级计算,让浏览器先解析哪条CSS规则。
2. 优先级特性经常是你定义的CSS规则不起作用的原因,虽然你认为起了作用,然而却不是。
3. 每个选择器都有它的优先级层次。
4. 如果两个规则同时作用于一个元素,优先级高的获胜。
5.优先级特性可以分为四类:inline styles, IDs, classes+attributes and elements.
6.英文好的可以看下这两篇文章, CSS Specificity WarsCSS Specificity for Poker Players
7.如果选择器有两个等级相同的值,后面的值会覆盖前面的值。
8.如果选择器有等级不同的值,以等级高的算,比如!important。
9.拥有更多优先特性选择器的规则更具有优先特性。
10.后面的规则肯定会覆盖前面相同的规则。
11.内嵌的CSS规则优先级特性最高。
12.CSS文件里,ID的优先级特性最高。
13.想要增加优先级,可以使用ID。
14.class比element级别高。
15.选择器分为四个级别,计算方式 0,0,0,0。
16.推荐一个CSS优先级计算器,CSS Specificity Calculator.。

什么是优先级特性

优先级计算是为了决定浏览器解析哪条规则。“优先级特性的权重关系CSS的显示。”Understanding Specificity (明白优先级特性)。

选择器的优先级特性决定了同一个元素多条规则下哪条规则实施。Selector Specificity (选择器优先级)。

每个选择器都有优先级,两个选择器作用与同一个元素,优先级高的获胜。

CSS优先级级别:

1. Inline styles  内嵌页面的CSS样式,比如<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

怎样测量优先级?

内嵌的为1000,ID为100,Classes, attributes and pseudo-classes为10,Elements and pseudo-elements 为1。

body #content .data img:hover 这里的特性值为 0,1,2,2

下面这张星球大战的图片也许能帮助你记忆:

CSS Specificity Wars

来测试下吧

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)

实际经验:

1. 使用LVHA定义链接,即link-visited-hover-active,参考[Link Specificity]
2. 如果不是为了兼容浏览器,最好不要使用 !important
3. 使用ID让特性更具体,比如a.high写成 ul#blog li a.high

CSS工具与资 英文好的去看下

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

posted @ 2007-09-15 16:10 愚人 阅读(359) | 评论 (0)编辑 收藏

2007年9月6日

我们先来看一段代码。

<?php
for ($i=10; $i>0; $i--)
{
echo $i;
flush();
sleep(1);
}
?>

按照php手册里的说法

该函数将当前为止程序的所有输出发送到用户的浏览器。

上面的这段代码,应该隔一秒钟输出一次$i。但是实际中却不一定是这样。有可能是等了10秒钟后,所有的输出同时呈现出来。

好,我们来改一下这段代码,改成

<?php
ob_end_clean();//修改部分
for ($i=10; $i>0; $i--)
{
echo $i;
flush();
sleep(1);
}
?>

嘿,加了这一句ob_end_clean();,居然就OK了。实际上,我们把ob_end_clean()换成ob_end_flush()也一样OK。

我再来改一改。

<?php
for ($i=10; $i>0; $i--)
{
echo $i;
ob_flush();//修改部分
flush();
sleep(1);
}
?>

运行一下,是不是发现$i也隔一秒输出一次了?这是为什么呢?
别急,我们来看看php.ini。

打开php.ini,搜索output_buffering,我们会看到类似这样的设置 output_buffering = 4096。正如它的名字output_buffering一样,这个设置的作用就是把输出缓冲一下,缓冲大小为4096bytes.

在我们的第一段代码里,之所以没有按预期的输出,正是因为这个output_buffering把那些输出都缓冲了。没达到4096bytes或者脚本结束,输出是不会被发送出去的。

而第二段代码中的ob_end_clean()和ob_end_flush()的作用,就是终止缓冲。这样就不用等到有4096bytes的缓冲之后才被发送出去了。

第三段代码中,用了一句ob_flush(),它的作用就是把缓冲的数据发送出去,但是并不会终止缓冲,所以它必须在每次flush()前使用。

如果不想使用ob_end_clean(),ob_end_flush()和ob_flush(),我们就必须把php.ini里的output_buffering设得足够小,例如设为0。需要注意的是,如果你打算在脚本中使用ini_set(”output_buffering”,”0″)来设置,那么请停下来吧,这种方法是不行的。因为在脚本一开始的时候,缓冲设置就已经被载入,然后缓冲就开始了。

可能你会问了,既然ob_flush()是把缓冲的数据发送出去,那么为什么还需要用flush()???直接用下面这段代码不行吗??

<?php
for ($i=10; $i>0; $i--)
{
echo $i;
ob_flush();
sleep(1);
}
?>

请注意ob_flush()和flush()的区别。前者是把数据从PHP的缓冲中释放出来,后者是把不在缓冲中的或者说是被释放出来的数据发送到浏览器。所以当缓冲存在的时候,我们必须ob_flush()和flush()同时使用。

那是不是flush()在这里就是不可缺少的呢?不是的,我们还有另外一种方法,使得当有数据输出的时候,马上被发送到浏览器。下面这两段代码就是不需要使用flush()了。(当你把output_buffering设为0的时候,连ob_flush()和ob_end_clean()都不需要了)

<?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);
}
?>

请注意看上面的ob_implicit_flush(true),这个函数强制每当有输出的时候,即刻把输出发送到浏览器。这样就不需要每次输出(echo)后,都用flush()来发送到浏览器了。

以上所诉可能在某些浏览器中不成立。因为浏览器也有自己的规则。我是用Firefox1.5,IE6,opera8.5来测试的。其中opera就不能正常输出,因为它有一个规则,就是不遇到一个HTML标签,就绝对不输出,除非到脚本结束。而FireFox和IE还算比较正常的。

最后附上一段非常有趣的代码,作者为PuTTYshell。在一个脚本周期里,每次输出,都会把前一次的输出覆盖掉。
以下代码只在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";
?>

posted @ 2007-09-06 09:57 愚人 阅读(273) | 评论 (0)编辑 收藏