这两天在论坛看到14px同学写的超过宽度显示省略号（无js全兼容），想法很有创意，使用一张图片来做“…”，另一张图片用来在字不够长的情况下盖掉“…”，原文攻略很完整，大家可以去看一下思路，个人认为的缺点就是用了图片，不够灵活，所以我就悄悄修改了代码，思路是用父一层的元素的伪类:after来完成“…”，再用元素自身伪类:after来盖掉不应该出来的“…”，看一下效果：

看上去好像很理想，但是text-overflow也不是那样好模拟的，有兴趣的同学看看demo就知道还有多少问题。

当成技术练手还是不错滴，不过估计应该不会拿着应用。

简单来说，我们在图片的CSS 加-ms-interpolation-mode: bicubic 就可以让IE7的图片在有缩放的情况下，失真变得不怎样明显，

更多的测试可以到可以到MSDN做的例子看一下效果，或者到血統の森-web実験小屋看一下效果。

没想到IE7平滑的效果居然可以比Safari好。更让我想不到的是，居然还有另一个属性值nearest-neighbor，难道为了让人节省CPU而使用吗？最少我现在还没想到为什么要用的理由。

BTW：那时发现这个属性后给同事笑到说，人家某部门去年就发现了，居然我开始火星鸟，不过发现了不用也没什么作用，呵呵，谨以此文献给比我还火星滴同学

=。= 上次本来想在某个产品上应用，结果给人BS了，原因是色不好看 囧rz

在css21 中 System Colors也有相关描述，CSS3还加了超链接的色，还有个flavor。

但是，要有浏览器支持才是硬道理，浏览器不支持，虾米都回家睡觉。

附各色显示效果，如果看不到文字部分就像刮彩票一半刮开看一下，其中，Background 这个在safari 比较神奇，是透明哦。

CSS2.1中的System Colors

ActiveBorder

Active window border.

ActiveCaption

Active window caption.

AppWorkspace

Background color of multiple document interface.

Background

Desktop background. » test color:Background @aoao

ButtonFace

Face color for three-dimensional display elements.

ButtonHighlight

Highlight color for three-dimensional display elements (for edges facing away from the light source).

ButtonShadow

Shadow color for three-dimensional display elements.

ButtonText

Text on push buttons.

CaptionText

Text in caption, size box, and scrollbar arrow box.

GrayText

Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

Highlight

Item(s) selected in a control.

HighlightText

Text of item(s) selected in a control.

InactiveBorder

Inactive window border.

InactiveCaption

Inactive window caption.

InactiveCaptionText

Color of text in an inactive caption.

InfoBackground

Background color for tooltip controls.

InfoText

Text color for tooltip controls.

Menu

Menu background.

MenuText

Text in menus.

Scrollbar

Scroll bar gray area.

ThreeDDarkShadow

Dark shadow for three-dimensional display elements.

ThreeDFace

Face color for three-dimensional display elements.

ThreeDHighlight

Highlight color for three-dimensional display elements.

ThreeDLightShadow

Light color for three-dimensional display elements (for edges facing the light source).

ThreeDShadow

Dark shadow for three-dimensional display elements.

Window

Window background.

WindowFrame

Window frame.

WindowText

Text in windows.

CSS3 新加的 User preferences for hyperlink colors

ActiveHyperlink

Active hyperlink background.

ActiveHyperlinkText

Text of an active hyperlink.

HoverHyperlink

Hover hyperlink background.

HoverHyperlinkText

Text of a hyperlink in the hover state.

Hyperlink

Hyperlink background.

HyperlinkText

Hyperlink text.

VisitedHyperlink

Visited hyperlink background.

VisitedHyperlinkText

Text of a visited hyperlink.

flavor

An accent color (typically chosen by the user) to customize the user interface of the user agent itself. User agents may default the ‘flavor’ color to the dominant accent color used on the physical machine/mechanism that the user is interacting with (frequently a mouse, keyboard, monitor and computer case, often just a laptop), if the UA is able to retrieve that information from the platform and machine. It is not expected that this value will make sense on all platforms and machines.

Firefox still does not implement the proposed CSS3 text-overflow property. It does however provide a similar behaviour for the XUL description element. Furthermore, it does support XBL bindings through CSS. This leads to the following solution:

.ellipsis {
  text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
  </binding>
</bindings>

xul:description的crop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦，不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。

然后还不小心发现。hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox，不过还是感觉用XBL简洁方便。。

在很久很久以前，我也在研究，能不能调用firefox处理title的点点点的东东来完成效果，不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行，看来人家是铁了心。

先来看一下一个我比较认同的概念：

框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。

基于继承的框架被称为白盒框架。所谓白盒即具备可视性，被继承的父类的内部实现细节对子类而言都是可知的。利用白盒框架的应用开发者通过衍生子类或重写父类的成员方法来开发系统。子类的实现很大程度上依赖于父类的实现，这种依赖性限制了重用的灵活性和完全性。但解决这种局限性的方法可以是只继承抽象父类，因为抽象类基本上不提供具体的实现。白盒框架是一个程序骨架，而用户衍生出的子类是这个骨架上的附属品。

基于对象构件组装的框架就是黑盒框架。应用开发者通过整理、组装对象来获得系统的实现。用户只须了解构件的外部接口，无须了解内部的具体实现。另外，组装比继承更为灵活，它能动态地改变，继承只是一个静态编译时的概念。

在理想情况下，任何所需的功能都可通过组装已有的构件得到，事实上可获得的构件远远不能满足需求，有时通过继承获得新的构件比利用已有构件组装新构件更容易，因此白盒和黑盒将同时应用于系统的开发中。不过白盒框架趋向于向黑盒框架发展，黑盒框架也是系统开发希望达到的理想目标。

再回头看一下现在网上那样多CSS框架（YUI是叫“YUI Library CSS Tools” 并非是“YUI CSS Frameworks”），有多少是真正以框架的概念在写，有多少只是定义样式基类的。当然，每个人对框架的理解不一定，你可能不认同我的说法。

再谈一下CSS 框架，并不非我不认可这个东西的存在，我从一两年前也就一直在尝试这样的东西。对于大型网站，前端的开发需要一个解决方案。框架自然是首选的。可惜距离我太远了，我太弱了T_T，我只要要求两点：

• 管理下面的内容的东西
• 类/组件

很明显，第一点，CSS做不到，第二点，相对其它语言很弱的说。

大约在一年前做一个中型网站时，我为了偷懒，我想到内容模块化，让程序员拼页面。大约方向也就是封装了一个又一个的功能块，程序员在要用到哪一块内容时就只要使用相应的HTML与CSS，大家都方便，我不要拼页面，他不用重复套代码，大家好才是真的好。

在同一个网站，差不多的内容块，多次使用是很正常的事，这也是就让模块化成为可能，比如一个图片列表，可能是用户头像列表，或者群组的图标列表，这时你会怎样写呢？相同的用这样吗？

.photoListUesr,.photoListGroup{ /*_*/ }

这样不是说不行，但如果突然说要再加一个相似的呢？这时可能就要调整样式。而我呢？尝试过这样的使用方式：

<div class="photoList UesrCt" />
<div class="photoList GroupCt" />

这样的话，我们一开始就分离出共同表现的东西，把.photoList当成原型，通处额外的class再去处理细节。前些天，我写了面向对象的XHTML与CSS编程，其实只写了一半，另一半是详细的例子，不过介于要做太多的例子跟核心已经写出来就没写完，^^ 当然，这样也存在一定的问题，就是最初的原型的定义要很慎重，要尽量做到以后就算是改版也可能不用修改。CSS这东西，基本上一个框架最多只能适合一个站，当然，如果这个站足够大的话，这样使用才是有意义滴。

HTML与CSS越是模块化，文件越分散这个问题就越严重。HTML倒是好办，反正是应用程序最终要合并输出一份，但CSS一般会给抛弃直接使用。如果在刚才的例子中，在网页导入CSS的方式是这样的话：

@import url(/xxx/photoList.css);
@import url(/xxx/UserCt.css);
@import url(/xxx/GroupCt.css);

那甚至可以考虑用程序来拼页面，但是使用方便，请求数也成正比，一般情况大家都会选择手动合并文件。虽然人脑比电脑更智能，但很多时候，人脑的计算能力是比不上电脑滴。我曾经有这样的想法，就是使用服务端程序来处理CSS的发布机制，大约方向就是通过网站访问日志来分析出整个站各种页面的使用量，通过程序来计算哪些公共使用的要合并，合并的顺序（CSS的文件顺序会影响到优先权），等等各种计算并压缩输出。

可惜的是，这样一套复杂的程序可能只适合一个站，或者同系列的站群。虽然说做起来有点折腾，但我相信门户级别网站使用这样的方式是有必要滴，当然前提还要整个团队都要使用相同的设计模式。

PS:以上CSS发布程序，只是我的幻想，还没尝试过，有兴趣的朋友可以尝试一下，如有意外，概不负责。^_^~

当然，就以上这些还是不能称得上CSS Frameworks，或许只能叫成一个系统级解决方案，毕竟，CSS只是描述性语言。

前晚跟月影一起吃烤鸭时，有聊到这个，他问我有没有前端一体化的解决方案。JS组件化时也会面临同样的问题，差不多的发布机制应该也可以适用JS。不过完全的一体化解决方案我还没想好，也许月影多请我吃几次烤鸭我就能想好。

广告一下：Ucren-widgets，国内一个不错的JS组件。

扩展阅读：CSS Frameworks + CSS Reset: Design From Scratch

那要怎样OO呢？现在大家都知道CSS是可以介样写滴：

.G_G { /* xxxxxx */ }

我们可以把它大约看一个原型，或者说成类，-__-b 好像本来就是类的样子，然后要在HTML里“实例化”一个对象，例如：

<div class="G_G">笨蛋嗷嗷</div>

该元素会使用上CSS相应的定义，但仅仅对应的class还是不够的，因为我们页面可能会多处应用到这个class，为了处理好“私有”的关系，把刚才的代码改成：

<div id="aoao" class="G_G">笨蛋嗷嗷</div>

这样的话，这个ID为aoao的元素就会应用.G_G这个类的定义，而且可以用#aoao{}这样的选择符来进去私有效果的定义，这样也不会影响到公共用的.G_G这个类，同时，#aoao定义的优先权会比.G_G高，符合私有定义比公共定义优先高的常理^^。

由于我使用了ID这个具有唯一性的东东，对这种私有定义后的东西复用就成了问题（一个ID只能在一个页面上出现一次，不知道谁说的，反正是真理）。如果我们要实现多个相同私有化的东东怎办呢？那我们就必须来实现“多态”。挖哈哈。再改一下代码：

<div class="G_G o_O">笨蛋嗷嗷</div>

一个是“G_G”，另一个是“o_O”，但是我们如果使用上.o_O{}也是可以定义到元素，假如CSS是这样的话：

.G_G {width:100%}
.o_O {color:#123456}

元素将都被定义到，而且由于定义不层叠，都会给应用。再假如代码是这样的话，不知道会不会更好理解。

<div class="layout color">不是笨蛋嗷嗷鸟</div>

.layout{width:100%}
.color{color:#123456}

接着，要来实现“封装”。子级选择符大家应该常常用吧，换代码：

<div class="G_G"><span class="bendan">笨蛋</span>嗷嗷</div>

虽然.bendan{}跟.G_G .bendan{}都可以定义，但是后者只能应用在class为“G_G”的元素，我们可以简单把.bendan{}理解成全局定义，把.G_G .bendan{}理解成局部定义，这样的话就有利于我们XHTML与CSS的模块化。^^传说中的“封装”出现了，再接着。

<div id="aoao" class="G_G o_O"><span class="bendan">笨蛋</span>嗷嗷</div>

这样的代码就可以产生无数的变化了，还不明白的从头看起。^^

其实，这些跟真正的面向对象还有很大一段距离，我只是在学标题党，不过可以用它来理解ID与class的应用。

微软在Vista中更新了标准网页核心字体（Web Core Fonts）。微软在90年代捐赠了这些字体，后来广泛应用于今日的浏览器，直到现在未发生变化。但随着Windows Vista的发布，微软几乎完全更新其中一部分字体——新增6种C类字体：Cambria，Calibri，Candara，Consolas，Constantia和Corbel。Vista包含的这6种新网页核心字体，Windows用户可免费获得（方法，下载PowerPoint Viewer 2007，软件会自行安装新字体）。网页开发者如果不使用Vista，那就最好去下载新字体，以便让设计的网页与Vista上显示的效果相同。这里有一个视觉对比新旧字体的PDF文档。

当然，现在Vista不是人人都玩滴，我们还是应该用上这样的写法，让适合的系统显示适合的字体：

font-family: Calibri, Arial, Helvetica, sans-serif;

其实挺好看滴。如果加上MAC可以凑成这张表：via

都是英文的，而且居然没有代替万恶的Tahoma，Tahoma在IE6下划线贴中文的问题很严重滴。其实中文也“有”，微软雅黑（microsoft yahei），现在随处可见^^ ，不过还是建议大家不要把正文定义成雅黑，想想Vista网页里还是用宋体，只是Viata的v5的，比起XP的v3.03肥了点，字怀大一点，看着舒服点。在XP下ClearType 没开或者没调好，雅黑只能用难看来形容。

当然，关于字体还有更好玩的方式： Web Fonts，代码如下：

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

有兴趣可以看下 CSS @ Ten: The Next Big Thing，web-kit已经支持这东东了。不过OOO说剛剛測試過後中文也支援，繪圖速度比較慢，另外字型下載完之前字都不會畫出來，而中文字型檔案果然大，我的螢幕黑掉一次才抓完，目前看來在有漢字的語系還是不實用。

虽然以前有font-face，可是后来给CSS2.1干掉了，干对滴，平衡了国人的心理^^ 现在又出这东东，摆明就是来打击大家。

var myStyle:TextField.StyleSheet = new TextField.StyleSheet();
myStyle.load("sample.css");
content_txt.styleSheet = myStyle;
content_txt.multiline= true;
content_txt.wordWrap = true;
content_txt.html = true;
var story:XML = new XML();
story.ignoreWhite = true;
story.load("sample.html");
story.onLoad = function () {
content_txt.htmlText = story;
}

这个是加载外部CSS跟HTML（其实是加载XML当HTML用-_-b ）的。后来Den写了两种把样式写在AS里的方式：

var css_str:String = ".aoao{color:#010101;font-weight:bold;} .aoao:hover{color:#ff0000}";
myStyle.parseCSS(css_str)

myStyle.setStyle(".aoao", {color:'#010101', fontWeight:'bold'});
myStyle.setStyle(".aoao:hover", {color:"#ff0000"});

其实HTML也可以写在AS里面，直接拼string就行。对于CSS在写在AS里还是加载外部CSS就要看情况了，用Web上还要考虑请求数，文件大小，缓存，更重要的是维护成本。不过在Web应用我也没想到有什么比较适合的应用，在浏览器里使用HTML加载Flash之后再用Flash加载HTML和CSS意义并不大，而且支持不是一般的弱，看一下支持的HTML标签跟CSS属性，＝。＝ 本来想用来解决中文下划线的问题，结果还是不行，据说别人是用flash画下划线滴。

浏览器的应用玩玩就算了。还是留在桌面应用吧。

译者简介：

任氏有无轩主人
英文名：TR@SOE
现居 苏州
主页：http://www.rsywx.net
博客：http://www.rsywx.net/wordpress
W3C的CSS2多语言翻译计划中文组的成员。
2003年Borland技术专家

• 译文下载地址
• 原文地址
• 译文本站分流下载地址
• 译文CHM本站分流下载地址 时间：2007-8-15 07:23

关于overflow:auto的，很多人贪他书写方便，直接用来清除浮动。但是Firefox使用overflow:auto会产生focus，引用网友fireyy的评论

我想这是FF浏览器的一个“可用性和亲和力”（usability/accessibility）的设定，当设定了overflow:auto或者 overflow:scroll的元素不能完全显示内容的时候（出现滚动条），针对于键盘使用者，就可以focus到那个元素，使用键盘的方向键去控制局部的滚动。

那用关于overflow:auto清除浮动有什么问题呢？当你鼠标坏掉时，用键盘按Tab键去网上看新鼠标时就会发现，按了N+N下Tab键都到不了想要到的链接，因为overflow:auto太多了。XD 想想老外为什么要写那样复杂的clearfix吧，难道他们的研究会比我们少吗？

那关于overflow:hidden呢？本来它是没问题滴，可是我们伟大的M$不喜欢它，早在04年POPO发现overflow:hidden会导致中键失效。

如果定义了嵌套区块元素(比如<div> )的overflow溢出样式，在这个区块上方，鼠标中键将失效，这主要是存在于IE中， Mozilla/Firefox/Opera普遍使用自定义的mouse guesture，所以不存在这个问题或者根本就谈不上这个问题。比如用IE浏览Plod的时候，在中间内容部分按鼠标中键(假设你的鼠标有中键)，那个上下滚屏箭头没有出现吧……

中键的功能估计用得比较少，一般出现N+N屏的页面，才会用中键来快速拉动，例如用IE6打开163（不知道改掉了没^^）试一下，虽然IE6里那个不可爱的四角样子比较难看，但是也不能因为它样子有问题就把它去掉，哪怕你是不小心的。因为真的有人会用到，上次跟一个做论坛的朋友有讨论到这个问题，是普通网友提到的。要是导致别人以为中键坏了可就不好^^。顺便说下，你们大胆用，因为我装了罗技的鼠标驱动，中键功能已经更新，就算IE也米问题。再再顺便说下，Firefox的中键那个图可以定制。XD

这些细小的问题可能你认为影响并不大，的确，它的影响并不大，可是Web标准本身的意义是什么呢？

扩展阅读：Accesskey引起的一点点思考
引起的相关问题:Firefox2中输入框丢失光标bug

我们经常把多个CSS或者多个JS并成一个，以节省请求，但是这样最少还是要两个。在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里，那怎样做呢？利用注释，先看一下这代码。

<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我，那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

CSS处理时会忽视掉<!–，这时JS部分只是CSS的注释/* js */，而JS处理时把<!–转成// 也就是JS的单行注释，单行注释会把后面的/*和*/干掉，同时也干掉了CSS，不废话了，看演示的例子。

在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：

<?header('Content-type: */*');?>

理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。

当然，这样的格式写起来一定很不爽，不过配合程序来读原来已经的，并处理一下就可以，这样就可以保持原来文件也方便维护，输出文件又省点请求，如果想的话，处理处理缓存，跟静态文件差不多了。这里有份C#的，据说是官方滴，我的是PHP的，因为还没写缓存的机制就不拿出来丢人了，其实原理也很简单，会编程的三两下就搞定。

再其实，我是想找把多份CSS合并的方式，合成一个不难，可以是处理好各模块化的分离同时能在客户端缓存及方便程序调用才是难的，CSS又不像JS可以在客户端异步调用，谁有好的方式介绍一下给我。

测试页：http://labs.aoao.org.cn/test/overflow/firefox/focus/，打开后狂按键盘的Tab键，然后再看一下代码，你会发现，介个问题很复杂，翻了W3C那英文好像也没提到。

不过，有个focus，可以让noscript的菜单更帅，又不过，据不科学的说法，它focus得很奇怪。本来想写个noscript的下拉菜单放出来，支持无鼠标操作，就是因为他focus得太帅了，等有空再写。

text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;

别兴奋了，该支持的都支持，其他都是骗小朋友滴。基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。

并不是说像-moz-text-overflow现在有用，而是一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用

这段代码是在css3.info上看到的，以前是没这样写滴，不知道是什么时候改的。

Firefox实现text-overflow的也有差不多行滴，一个是JS+XBL，另一个CSS的:after 的，以前在试着写用xbl来监视文本的宽度的配合:after，不用想就知道我是失败的，如果单XBL可以行的话，别人也不用配合JS来写了。

打个比方。比如打War3 不知道你会不会打呢？1 vs 1 的战场上一定会有一个人输。为什么呢？war3任何一个族都有十几种兵。每种兵都是不同的血，不同的攻击，不同的防御。掌握得到细节才能立于不败。

一般新手都不会考虑那样多。只要兵多点，以人海作战。div一片倒。打得多了就聪明点。比如当对手出火枪时就想一下要出什么兵对应。用用h 用用p等。打得更多点的就开始研究一下。比如蜘蛛出来有多少血，攻击多少。li默认的margin padding 等等。打得更更多点的又接着研究。比如小鹿配什么兵去打好一点呢 光环是干啥。药水是干啥。研究一下不同元素的搭配应用。h3+ul 还是h3+ol好一点，或者table最好。打得更更更多点的又接着研究。比如什么时候打什么怪升级最快，建筑应该怎样建，要不要定义热键。CSS 对应的是什么。。来。大伙猜猜。 接着着。研究各种各种可以玩的东西。已经不再为了打胜战为第一目标了。在过程中寻找快乐。比如做做CSS特效等。

突然有一天，我发现。其实我压根的不了解War3，我接着又从头开始一点一点的研究各种兵的各种属性。对针对打别的兵有什么跟什么。。哪怕1hp也不放过。如同war3 我发现我自己也一点都不了解html跟css，我又从开头研究html和css的各种各样相关的。对各种各样的浏览器有什么跟什么。连0.1%都不放过。
再接着学什么呢？我也不知道。我还没研究完。。估计还要研究好长的一段时间。

这时候。我再次问一下。你真的学完html和CSS吗？
如果真的学完的话。。哇。。我还没学完。。不如换个问题。

学过了xhtml+css或者div+css之后要学什么呢？

如同学xhtml+CSS一样。打久了war3 还换点别的。打CS好呢还是打星际呢？
如果想快点上手的话。。自然是选xml+xslt拉。简单的说。html约等于xml+xslt，就像魔兽与星际一样。有什么相同的地方。但是还是有些不一样。如果是选CS的，那就不能用war3的打法打，不然一定被暴头的滴。因为那是了别一种战斗的方式，比如写js。

其实除了war3可以玩外。还有很多很多游戏可以玩。 你非一定要把它玩精了再玩别的游戏,可以同时玩很多游戏滴。 网页也一样，除了html css还有很多东西。 你非一定要把它们学精了再学别的。可以同时学很多种技术。

不过术业有专攻。。。这句话大家应该听过。怎样选择就看你自己。你发展的方向是什么。就是你的选择。如果你有不同的想法，一起交流一下，经典讨论地址。
BTW:其实，应该比如成星际会更精准一点，不过我不会打星际。。

长度单位比较好理解。多少就多少，正的就正，负的就负的。而关键字的中left top就是0% center 就是50% right bottom就是100%，那百分比是怎样算的呢？

假如是 background-position:50% 0 的话，就是容器的左上角开始的坐标(50%,0) 和背景图的左上角开始的坐标(50%,0)的位置同点处，但这样的说法好像比较不好计算。
或者换个说法比较容易理解： 容器的宽减去背景图的宽，再乘 50% ，高的计算也一样。

比如 容器宽 1000px 背景图宽 800px：
如果background-positionX 是50%时，就是 ( 1000px – 800px ) * 50% = 100px；
如果background-positionX 是-50%时，就是 (1000px – 800px ) *-50% = -100px。

又比如 容器宽 600px 背景图宽 800px ：
如果background-positionX 是 50% 时，就是 ( 600px – 800px ) * 50% = -100px；
如果background-positionX 是 -50% 时，就是 (600px – 800px ) *-50% = 100px 。

最后一种就会出现就算是使用负的百分比也让容器的背景图左边为空或者出现背景色，百分比真是奇妙！

对于百分比使用后出现小数部分的可以参考我写的另一篇：百分比的细节－－容器大小篇。

.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text-justify :distribute-all-lines;
}
div.cn:after {
content: "__________________________________________";
font-size:100px;
} 

对了非IE的我是使用content还增加内容达到有第二行，才会在第一行两端对齐。

不过各浏览器对中文的理解不一样。Firefox 是直接分割中文，Opera不会分割中文，只认空格，要是在中文中间插点半角的英文或者标号它还会对不齐，safari接近Opera。都是不加空格没法分

英文比较好，因为大家只能用空格分来单词，不过IE用text-justify :distribute-all-lines来分真是难看得要命。本来想过用htc或者js帮IE，可是发现,IE6好笨的说，家里没IE7不知道怎样。

或者敲空格是一种比较好的方式，可firefox这种只放大文本的浏览器一放大文字就XX了，我写的那个烂方法也只有在一定的情况下有用，想起一句话：珍惜生命，远离Firefix!

规则很简单：4月5号那天，把CSS去掉，让大家看一下你网站的结构吧。XD

这可不是玩笑哦，今年已经是第二年了。去年有700多个站有被爆了光，这是去年的标志，看来今年Web2.0了。

今年呢？关注官方： http://naked.dustindiaz.com/

这几天一直悄悄在看着这有没有动静，静了好久，原来是错开愚人节。XD

也许有人可能要问~ 为什么要祼奔~ 介个介个。。因为爱玩。没什么特别滴。

不过据说网站祼奔可以看清一个网站的“内在美”或者“内在丑”

去年国内没有多少站在“祼”，我知道的只有我、小甘甘、csser.org(那时还是我上FTP改文件)还有几个记不起来的站，今年不知道国内又能有多少呢？

测试页面，一些浏览器的截图标宽度也在里面

IE：按四舍五入的方式计算。

Firefox：计算后的值忽略小数部分，但会把多出的长度分配给里面的各元素。 如果只多出1px，比如2*386=772，剩下的1px会到其中一个元素，优先分配第一个元素，像773px分配给两个50%时得到的是：387px和386px，分配给四个25%时得到的是：194px、193px、193px和193px； 而对于多出几个px，如773*33.3%=257.409，773*33.33%=257.6409，由于忽略掉的小数不一样，分配的原则也不一样，找不到相关资料，以下是我的猜想，三个元素的，按四舍五入的方式分配，四舍的优先分配给两边，五入的优先分配给前边两个，对于分配给三个元素以上的，多出部分自由分配，我找不到规律，但第一个一定会分配到。

FF还有一些奇怪的地方。Firefix测试页面。1024宽度不会自动分配，也许是因为外层也是带小数的，导致1px没分配，接着测试Firefox

Opera & Safari2：计算时忽略百分比的小数部分，计算后的值忽略小数部分，如果里面的元素大于计算后的宽度不会导致后面的元素换行。

Netscape & Mozilla：计算后忽略小数，多出部分有点类似Firefox，但多出部分是比透明显示，而且比较奇怪，比如33.33%*3=99.99%　小于100%，但却大于100%，奇怪的浏览器，还好使用的人不多，不用过于在意这两个浏览器。

测试没完成，有兴趣的朋友帮忙测试，单独的测试页，有知道原因的朋友讲一下下

测试页面，IE打开

再配合overflow:hidden就可以搞定问题。

不要问我这个是为什么，我也不知道原因，谁知道跟我说下，我也是那里玩时偶然发现的。XD　代码在这里

<div class="wrapper">
<div class="sbox">Content</div>
<div class="sbox">Content</div>
</div>

.wrapper{
clear:both;
float:left;
width:150px;
border:3px #666 solid;
padding:3px;
background-color:#efefef;
}
.sbox{
/*clear:right;*/
float:left;
width:100px;
height:100px;
border:1px #000 solid;
background-color:#ccc;
}

html:first-child>*+body {...}

测试页面，解读一下：
html:first-child就是html 自己
html:first-child>* 就是html下子一级的所有,可以是head
html:first-child>*+body 就是可以head后面的body

这个选择符FF2不认，IE7也不认，Opera跟Safari可以，一开始还以为FF下的html跟body里还有层什么，FF的html下有别的东西很久前的事了，比如在本站按下中键，代码在后面。

后来又测试了，原来是不认识 html:first-child，~_~ 真笨，不知道人家是不是故意的。不过不认识也好，可以拿来当filter用，过滤FF的方式其实已经很多了，比如：

 :root Selectors{}/*不过这个Netscape也认识*/
@-moz-document url("loaoao.com") {
Selectors{ ... !important}
}/* 这个是FF特有的，常常给我用来过滤广告 */ 

不过这个比较特别，据不科学的说法，FF3是通过Acid2测试的，对CSS的支持变化应该不小，到时也许又会有N多问题会出现，得有区分Firefox不同版本的，这个就有作用了，区分FF1.5跟FF2的方式我还没找到，谁知道跟我说。

html>img /* autoscroll overr-de for Firefox */
{
width: 0!important;
height: 28px!important;
padding-left: 28px!important;
background: url(../images/autoscroll.png);
}

用FF看在本站时，按下鼠标中键，看看会看到什么。XD 据说这段css最早是由http://www.sitepoint.com/ 使用的，那是老九发现的，那是Firefox社区的fiag发现。（^^感谢郭爽 的提醒）