对于块级元素,宽度默认会继承父级的宽度也就是100%（内联元素没有宽度，即使定义了也无效），而最外层元素HTML的宽度一般是随窗口的改变而改变的(改变窗口大小再点击下面代码)

alert(document.body.offsetWidth + "px")

YAHOO的做法是为满屏的元素（顶部提示条）加上min-width ,IE6不支持此属性不知道是YAHOO是怎么解决的，但是让IE6支持min-width实现方法可以用执行表达式 Expression:

width:expression((documentElement.clientWidth < 400) ? "400px" : "auto" )

另一种方法是用border-width来模拟

* html .minwidth { 
	border-left:600px solid #fff; float:left
}
* html .container { 
	margin-left:-600px; float:left;	 position:relative;
}

查看演示

XBLeXtensible Bindings Language也即是可扩展绑定语言,有点类似IE的HTC,HTC在CSS中的引用格式为：

p{behavior:url(test.htc)}

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

然后就可以通过Firefox的私有属性-moz-binding 将一个元素关联到一个XBL文件中的指定项上:

p {
    -moz-binding:(url('lefter.net/demo/wordwrap.xml.xml#wordwrap');
}

1. FireFox私有属性
2. Firefox XBL
3. Emulating CSS word-wrap for Mozilla/Firefox
4. Cross Browser Word Breaker
5. 连续字体换行的解决方案

1.用CSS执行表达式

*{margin:0;padding:0;}
* html,* html body{ 
	background-image:url(about:blank);
 	background-attachment:fixed;
}
* html .fixed{
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.offsetHeight-
    (parseInt(this.currentStyle.marginTop,10)||0)-
    (parseInt(this.currentStyle.marginBottom,10)||0)));
}      
.fixed{
    position:fixed;
    bottom:0px;
    top:auto;
}   

2.让body保持其原有高度，让html只有一个窗口那么高

*{margin:0;padding:0}
*html{overflow:hidden;}
*html body{height:100%;overflow:auto;}        
.fixed{
    position:fixed; _position:absolute;
    left:0;
    bottom:0;
}

推荐阅读
http://tagsoup.com/cookbook/css/fixed/
http://subtlegradient.com/

#Far Future Expires Header
<FilesMatch "\.(gif|png|jpg|js|css|swf)$">
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
</FilesMatch>

Keep in mind, if you use a far future Expires header you have to change the component’s filename whenever the component changes. At Yahoo! we often make this step part of the build process: a version number is embedded in the component’s filename, for example, yahoo_2.0.6.js.

第一步，建立一些可规则重写的存储模块，一边存储文件的版本号，因此还是在.htaccess的文件中加入下面的代码

#Rules for Versioned Static Files
RewriteRule ^(scripts|css)/(.+)\.(.+)\.(js|css)$ $1/$2.$4 [L]

然后写一个PHP函数来检查文件的最后修改日期，然后将服务器的修改时间作为版本号

<?php 
function autoVer($url){$path = pathinfo($url); 
$ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
echo $path['dirname'].'/'.str_replace('.', $ver, $path['basename']); } 
?> 

include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php'); 
<link rel="stylesheet" href="<?php autoVer('/css/structure.css'); ?>" 
type="text/css" /> 
<script type="text/javascript" src="<?php autoVer('/scripts/prototype.js'); ?>">
</script> :include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php'); 
<link rel="stylesheet" href="<?php autoVer('/css/structure.css'); ?>"
type="text/css" />
<script type="text/javascript" src="<?php autoVer('/scripts/prototype.js'); ?>">
</script> 

<script type="text/javascript" src="/prototype.197993206.js"></script> 

BTW : 用IE私有属性能控制滚动条的样比如：scrollbar-3dlight-color,scrollbar-highlight-color，scrollbar-face-color，scrollbar-arrow-color，scrollbar-shadow-color，scrollbar-darkshadow-color，scrollbar-base-color，scrollbar-track-color

在此对常用的META标签的属性进行一些总结，

HTTP-EQUIV

HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显

Refresh (刷新)

让网页多长时间（秒）刷新自己，或在多长时间后让网页自动跳转到其它网页<Meta http-equiv="Refresh" Content="5; Url=http://lefter.net"/>

Expires (期限)

指定网页在缓存中的过期时间，一旦网页过期，必须重发请求到服务器获取更新<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"/>

Pragma (cach模式)

禁止浏览器从本地机的缓存中调阅页面内容<Meta http-equiv="Pragma " Content="No-cach"/>

X-UA-Compatible

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=”IE=7″在无论页面是否包含指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content=”IE=EmulateIE7″模式遵循指令。对于多数网站来说，它是首选的兼容性模式。<Meta http-equiv="X-UA-Compatible " Content="IE=7"/>

NAME变量

name是描述网页的，对应于Content网页内容，以便于搜索引擎机器人查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。name的value值name=”"；指定所提供信息的类型。有些值是已经定义好的。

例如description，keyword，Author，Copyright等，这些常见的就不特地说明了

name=”Robots” (搜索引擎向导)

说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。index针对，页面文件本身，而Follow针对页面的链接，搜索引擎顺着连接往下抓取

后来才注意到Firefox里面也是不正常的，因为下面多出了一行空白，因为他给链接用的白色的字体，背景也是白色的所以就不能看见；但是FIREFOX为什么不报错呢，我想是因为我们新闻网的前端架构采用XSL解析XML的方式,而XSL也是一种XML,XML相对html要规范的多,很多标签如CENTER，FONT等都被取消了,还有所有的标签必须关闭,而他用的< a >< font color="#FFFFFF" >turkler< /a >这两点都不满足，而Firefox渲染的时候是把XML直接转换为HTML(在IE，和firefox下分别查看源文件就可以知道)，因此不报错！但是能解析出来，只是此人用了白色的字体，而背景也是白色的，所以看不出来罢了，全选的时候就能看出来了

我滴神啦，被改掉的DEFAULT文件，还不知道有没有其他的文件被改掉

还好此人没有多少恶意，只是加上他的链接在上面，可能是想赚取PR，也给我们敲了个警钟。现在应该找出我们的服务器的漏洞出在哪里，大家不要在上面安装其他的软件

• 减少HTTP请求
• 使用内容发布网络（CDN）
• 增加EXPIRES头
• 压缩组建（gzp）
• 样式放在首部
• 将脚本放在底部
• 避免CSS执行表达式
• 外联CSS，JS文件
• 避免重DNS定向
• 配置ETA

该书开篇提到了一个性能黄金法则

仅10%-20%的最终用户响应时间花在HTML文档上，其余时间时间用于下载页面的主键

外联css这是没发说的，背景的图片也得到了合并；结合我的博客的结构-主页和博客页面独立，这样我就写了一个公共的style.css，一个blog.css,一个index.css,两个页面都调用style.css然后用@import分别在不同的页面引入blog.css。@import和LINK调用外部样式的区别之一就是，加载顺序的差别，一般来讲：link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载，这样就浏览@import加载CSS的页面时开始会没有样式

然后我去掉所有CSS中的IMAGES发现在整体布局，浏览体验上没的多大的区别，应此我就只是把带有背景图片的CSS样式抽取到单独的CSS文件中，然后@import，目的是让其最后加载！但是这样一来就增加了一个HTTP请求，出于这点我把带有背景图片的样式提取到最后脚本处，目的是让其最后执行！

虽然图片不多，体积也不很小，但是出于追求最优的角度，我思考了！

大多事物都是这样具有不确定性，很多时候，我们寻求的就是在特定条件下的最佳实践，因此我们更应该沉下心来去探原、整理、归纳、总结

在我实践之前才记得，在W3C标准中style定义一般是推荐放在BODY中的应此就没这样干，只是把CSS和图片，感觉加载速度还是不错

下面说一下float:center实现浮动居中的思路，采用的是相对定位：ul为position:relative;left:50%，然后再让li像左浮动，在让它position:relative;right:50%（或者left:-50%），那么li就像向中间浮动一样居中了。

demo

1、减少图片数：去除不必要的图片。
2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文大小的变化是比较大的。
3、常识使用脚本文件代替效果：
比如一些web2.0的样式，如果使用ps制作，每个图片基本会增加%5-%25的大小成本.
相反，使用javascript代码来实现效果,仅仅只增加几个字节.
图像格式的选择
一般在网页上使用的图片格式有三种，jpg、png、gif。
1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。
2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。
3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

网址后加斜杠

有些网址，比如www.yahoo.com当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成http://www.www.yahoo.com，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

五、标明高度和宽度

当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参 数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

减少http请求

当浏览者打开某个网页，浏览器会发出很多组件（图像、脚本等等），视乎网络延时情况，每个对象加载都会有所延迟。如果网页上对象很多，这可以需要花费大量的时间。

因此，要为http请求减负。如何减负？

1、去除一些不必要的对象。
2、将临近的两张图片合成一张。
3、合并CSS文件
看看下面这段代码，需要加载三个CSS文件：
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet” type=”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
我们可以将其合成一个：
<link rel=”stylesheet” type=”text/css” href=”/style.css” />
从而减少http请求。
其它小技巧:
1、去除不必要加载项。
2、如果在网页上嵌入了其它网站的widget，如果有选择余地，一定要选择速度快的。
3、尽量用图片代替flash，这对SEO也有好处。
4、有些内容可以静态化就将其静态化，以减少服务器的负担。
5、统计代码和JS文件一般放在页尾(或者使用延迟加载)。

This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 <link> 放在页面尾部。

This is a valid syntax, but, even though it’s in the document’s HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems