月度存档: 五月 2010

jquery广告轮换效果

作者: 日期: 2010年05月24日 1 条评论

jquery实现的广告轮换效果运行后再刷新一下新开的页面可看到效果

提示：你可以先修改部分代码再运行。

浏览器内核剖析

作者: 日期: 2010年05月16日 3 条评论

在网页制作中，尤其是从事前台设计的朋友经常会遇到一些浏览器对CSS或者JS代码的兼容性问题；对于从事程序开发的朋友来说，了解了浏览器的内核就可以减少网站测试的重复性劳动！应一位网友的留言。特在此将浏览器内核的分类贴出来与大家共享！

Rendering Engine

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下。

Trident： IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。
由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。

Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。
限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器，这个内核本身应该说市场范围并不大；但似乎根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。Mac下还有OmniWeb、Shiira等人气很高的浏览器。
google的chrome也使用webkit作为内核。
WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
2010年4月8日最新的搜狗浏览器也是采用了webkit内核，号称双引擎内核，呼声很高，期待其发展。
KHTML：
 KHTML，是HTML网页排版引擎之一，由KDE所开发。
KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。
KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。
苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用，并发布所修改的最新及过去版本源代码。后来发表了开放源代码的WebCore及WebKit引擎，它们均是KHTML的衍生产品，在开发网站列出引擎改变内容，并会传回至KDE计划。由于两个衍生产品各走不同路线，使两者源代码偏离，在与KDE交换更新会出现困难。其中一个原因，是苹果在对外公开源代码之前，以一年时间编修他们的KHTML。另外，苹果传送更新至KDE计划的方式，多是一口气把大量改动一起传送，KDE在整理资料也出现一定的困难，及后苹果表示会以CVS格式来传送。再者，苹果所作出的改动包括Mac OS X系统独有的事物，如Objective-C、KWQ等，在Linux及KHTML是没有的。但KDE方面仍透过这些改动，为KHTML加入新功能及加快其排版速度。

Gecko： Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。
事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Geckos。不过事实上，Gecko 内核的浏览器仍然还是Firefox用户最多，所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

Presto： 目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）。那次测试的时候因为Apple机的硬件条件和普通PC机不同所以没有测试WebCore内核。只可惜Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

四大浏览器内核：
Trident内核：IE、世界之窗、傲游、TT、360安全浏览器、搜狗……以及各种没有特殊注明基于其他内核的浏览器，基本都是Trident内核的；
Gecko内核：Firefox、NetScape、K-Meleon、The Dragon（COMODO公司新出的）；
WebKit内核：Chrome、Safari；
Presto内核：Opera；

自己常用的reset css

作者: 日期: 2010年05月14日 6 条评论

我使用过的reset css  下面有两个版本：

/*以前用的*/

@charset "gb2312";
* { margin:0px; padding:0px;}
html{color:#333;background:#FFF;}
body{ text-align:left; font-style:normal; font-size:12px; line-height:20px; font-family: tahoma,arial,\5b8b\4f53,sans-serif;}
ul,ol{list-style:none;}
table{ border-collapse:collapse; border-spacing:0;}
img,fieldset {border:0;}
h1,h2,h3,h4,h5,h6{font-size:14px;}
input,label,select,option,textarea,button,fieldset,legend,table,td {font-size:12px;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:normal;}
a { color:#333; text-decoration:none;}
a:hover{ color:#F00; text-decoration:underline;}

/*最新的更新于20110228*/

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none; color:#333;}
a:hover{text-decoration:underline; color:#F00;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:after{ content:"\020"; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{ zoom:1;}

Css3弹性盒模型

作者: 日期: 2010年05月5日 2 条评论

Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。

使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:

1.<body>
2.  <div id="box1">1</div>
3.  <div id="box2">2</div>
4.  <div id="box3">3</div>
5.</body>

传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。

1.display: box;

水平或垂直分布

“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示，

1.body{
2.  display: box;
3.  box-orient: horizontal;
4.}

反向分布

“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。

1.body {
2.  display: box;
3.  box-orient: vertical;
4.  box-direction: reverse;
5.}

具体分布

属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。

01.body {
02.  display: box;
03.  box-orient: vertical;
04.  box-direction : reverse;
05.}
06.#box1 {
07.  box-ordinal-group: 2;
08.}
09.#box2 {
10.  box-ordinal-group: 2;
11.}
12.#box3 {
13.  box-ordinal-group: 1;
14.}

盒子尺寸

默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。

如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。

如果盒子是弹性的，其大小将按下面的方式计算：

  1. 具体的大小声明（width、height、min-width、min-height、max-width、max-height）；
  2. 父盒子的大小和所有余下的可利用的内部空间

如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。

如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。

看看下面的例子，理解起来更容易。

所有盒子都是弹性的

下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。

01.body {
02.  display: box;
03.  box-orient: horizontal;
04.}
05.#box1 {
06.  box-flex: 2;
07.}
08.#box2 {
09.  box-flex: 1;
10.}
11.#box3 {
12.  box-flex: 1;
13.}

一些盒子有固定大小

下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因此，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。

01.body {
02.  display: box;
03.  box-orient: horizontal;
04.  width: 400px;
05.}
06.#box1 {
07.  box-flex: 2;
08.}
09.#box2 {
10.  box-flex: 1;
11.}
12.#box3 {
13.  width: 160px;
14.}

溢出管理

因为是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。

空间太多如何处理

可利用空间的分布取决于两个属性值：box-align 和 box-pack。

属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。

  1. start 所有盒子在父盒子的左侧，余下的空间在右侧；
  2. end所有盒子在父盒子的右侧，余下的空间在左侧；
  3. justify 余下的空间在盒子间平均分配；
  4. center 可利用的空间在父盒子的两侧平均分配。

属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。

  1. start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部；
  2. end 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；
  3. center 可用空间平均分配，上面一半，下面一半；
  4. baseline 所有盒子沿着它们的基线排列，余下的空间可前可后；
  5. stretch 每个盒子的高度调整到适合父盒子的高度
01.body {
02.  display: box;
03.  box-orient: horizontal;
04.  /* The content of the body is horizontally centered */
05.  box-pack: center;
06.  /* and vertically as well ... \o/ */
07.  box-align: center;
08.  width: 100%;
09.  height : 100%;
10.}

空间不足怎么办

与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。

弹性盒模型看起来很不错，Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说，firefox、safari、chrome可以使用这些特性，可以看看这个弹性盒模型的demo。

作为前端开发者来说，该模型对我们解决网页设计中一些常见的问题非常方便，如：表单布局、垂直居中、视觉上分离html流，等等。不就的将来它将成为一个web标准，早早熟悉它不是什么坏事。

更多参考

原文地址：http://www.denisdeng.com/?p=938

转载地址：http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/