转至link,加入自己的扩展

怪异模式和DTD

用于HTML 4.01的严格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

用于HTML 4.01的过渡型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
 
用于XHTML 1.0的严格类型
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

用于XHTML 1.0的过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果漏写DTD声明(Document Type Definition 文档类型定义),Firefox仍然会按照标准模式解析网页,但IE(6,7,8)就会触发怪异模式.

如何组织CSS-分层

应用 css 的能力分两部分：一部分是css的API，重点是如何用css控制页面内元素的样式；另一部分是css框架，重点是如何对 css 进行组织。如何组织 css 可以有多种角度，例如按功能划分，或者按区块划分。这里讲一下 base.css + common.css + page.css 的组织方法。将网站内的所有样式，按照职能分成三大类：base、common、page，这三者是层叠结构。

1、base 层-精简通用

位于三者的最底层，提供 css reset 功能和粒度最小的通用类——原子类。这一层会被所有页面引用，是页面样式所需依赖的最底层，不同风格的网站可以使用同一个 base 层，所以，应具有高度可移植性，力求精简和通用。该层相对稳定，基本不需要维护，可以简单地放在一个文件里，如 base.css。

css reset 即一开始就将浏览器的默认样式全部去掉，就是通过重新定义标签的样式，“覆盖”掉浏览器提供的默认样式。可以将常用的标签显式地罗列出来，避免使用“*”，如来自于 YUI 的部分 css reset 的代码：

/*CSS reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

ol,ul{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:”;}

abbr,acronym{border:0;}

在CSS中引入面向对象编程思想,例如:封装,多用组合少用继承原则等.

View Code

/*文字排版*/
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f20 { font-size: 20px; }
.fb { font-weight: bold; }
.fn { font-weight: normal; }
.t2 { text-indent: 2em; }
.lh150 { line-height: 150%; }
.lh180 { line-height: 180%; }
.lh200 { line-height: 200%; }
.unl { text-decoration: underlline; }
.no_unl { text-decoration: none; }
/*定位*/
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.bc { margin-left: 0; margin-right: 0; } 
.fl { float: left; display: inline; }
.fr { float: right; display: inline; }
.cb { clear: both; }
.cl { clear: left; }
.cr { clear: rigth; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.vm { verticle-align: middle; }
.pr { position: relative; }
.pa { position: absolute; }
.abs-right { position: absolute; right: 0; }
.zoom { zoom: 1; }
.hidden { visiility: hidden; }
.none { display: none; }
/*长度高度*/
.w10 { width: 10px; }
.w20 { width: 20px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w200 { width: 200px; }
.w300 { width: 300px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }
.w700 { width: 700px; }
.w800 { width: 800px; }
.w { width: 100%; }
.h50 { width: 50px; }
.h80 { width: 80px; }
.h100 { width: 100px; }
.h200 { width: 200px; }
.h { height: 100%; }
/*边距*/
.m10 { margin: 10px; }
.m15 { margin: 15px; }
.m30 { margin: 30px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt50 { margin-top: 50px; }
.mt100 { margin-top: 100px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mb100 { margin-bottom: 100px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml50 { margin-left: 50px; }
.ml100 { margin-left: 100px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr50 { margin-right: 50px; }
.mr100 { margin-right: 100px; }
.p10 { padding: 10px; }
.p15 { padding: 15px; }
.p30 { padding: 30px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt50 { padding-top: 50px; }
.pt100 { padding-top: 100px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb50 { padding-bottom: 50px; }
.pb100 { padding-bottom: 100px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl50 { padding-left: 50px; }
.pl100 { padding-left: 100px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr50 { padding-right: 50px; }
.pr100 { padding-right: 100px; }

通用原子类是一系列常用的基本类，包括：文字、定位、长度和边距，由于其原子性，除少数特殊类，大部分都只包含一句 css，如：.f12{font-size:12px;}，由于其通用性，在保证命名有语义前提下，命名应尽量简短，如 paddingtop20 可以写成 pt20。通用原子类里有几个类较特殊，特别说明一下：

1).fl 类和.fr 类：除了设置 float：left 和 float：right 之外，还应设置 display：inline，可以解决 IE6 的双外边距 Bug。
.fl{float:left;display:inline} .fr{float:right;display:inline}
2).bc 类：为使块级元素居中，还要设定宽度，配合 .w100 等类同时使用，如：
.bc{margin-left:auto;margin-right:auto;} .w100{width:100;}
3).clearfix 类：用于在父容器直接清除子元素浮动。例如"<div class="clearfix"><div class="fl"></div></div>"
.clearfix:after{content: ".";display:block;height: 0;clear: both;visibility: hidden} .clearfix{display:inline-block}* html .clearfix{height:1%} .clearfix{display:block}
4).zoom 类：设置样式是 zoom:1，它是 IE 的专有属性，用以触发 hasLayout。可替代"height::1%"来触发hasLayout.

2、common 层-组件级，模块化，重用

位于中间，提供组件级的 css 类。可以将页面内的元素拆分成一小块功能和样式相对独立的小“模块”，将大量重复地“模块”视为一个组件，放在 common 层里（“模块化”可以从样式和行为两个层面来考虑，与 common 层相关的是样式的模块化）。common 层相当于 MVC 模式中的 M（Model，模型），需尽可能将内部实现封装。

common 层是网站级的，不同的网站有不同的 common 层，同一个网站只有一个 common 层，可以放在一个文件里，也可按功能划分放在多个文件里。在团队合作中，common 层最好由一个人负责，统一管理。

3、page 层

网站中非高度重用的模块，可以放在 page 层里。page 层位于最高层，提供页面级的样式。如果网站规模不过于庞大，可以将所有 page 层放在一个文件里，根据页面配上注释，分块书写，便于维护。page 层 css 文件应越简越好，能用 base 层和 common 层的 css 解决的，尽量不要用到 page 层。

小知识点

低权重原则:HTML标签的权重是1,class的权重是10,id的权重是100。

关于a标签的四种状态排序问题,love hate 原则,l(link)ov(visited) h(hover)a(active)te.

驼峰命名用于区别不同单词，划线用于表明从属关系。

如果main层的内容比起sidebar更重要,无论样式上谁左谁右,必须保证main先加载.

IE6下PNG的解决方案 link

CSS sprite

1.技术是针对作为背景的图片，对与html文档<img src=""/>设置的图片，不能合并到CSS Sprite大图，否则图片会影响页面可读性。

2.对于横向和纵向都平铺的图片，也不能使用CSS sprite；如果是横向平铺的，只能将所有横向平铺的图合并成一张大图，只能竖直排列，不能水平排列；如果是纵向平铺的，只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列。

3.CSS sprite的图片定位可以使用bg2css小工具快速定位background-positon坐标，有利于提高开发速度。

4.好处是减少HTTP请求数减轻服务器压力，缺点是降低开发效率、增加维护难度。CSS Sprite大图中每个图片的维护改动都要谨慎，防止影响周围的图片。

网站是否使用CSS Sprite技术，主要取决于网站流量。

流量大的网站好处明显：减少HTTP请求数量，减轻服务器压力；（电商，微博，轻博，社区）

流量不大的网站代价很大：降低开发效率，增大维护难度（后台管理系统一般不适合使用）

CSS hack

1.IE条件注释法

该方法安全性、兼容行好，也是微软推荐的hack方法，但是不利于开发维护，需要维护多份css文件。比如涉及到针对不同版本IE的css。

只在IE下有效

只在IE6有效

只在IE6以上版本有效

注意：结合lte(小于等于)、lt(小于)、gte(大于等于)、gt(大于)、!(非)关键字使用。

2.选择符前缀法

“*html” 前缀只对IE6生效 "*+html"前缀只对IE7生效

.test{width:80px;} /*IE 6 7 8*/

*html .test{width:70px;} /*IE6*/

*+html .test{width:60px;} /*IE7*/

缺点：不能保证IE9，10不识别*html,*+html，有向后兼容风险。

3.样式属性前缀法：

header {width:300px;} /* 所有浏览器*/
header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */
header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
header {_width:290px;} /* IE6能识别，IE7、IE8和FF不能识别*/

由于IE条件注释法不利于开发维护，实际中常用的hack方法常常是后两者。

display:inline-block 和 hasLayout

块级元素、行内元素

块级元素会独占一行，默认宽度自动填满其父元素宽度，可以设置width、height、margin、padding属性；

行内元素一行排满才会换行，宽度随元素内容多少变化，设置width、height属性无效，只有水平方向的margin、padding边距有效果。

常见的块级元素有div、p、table、fieldset、form、ul、ol、dl、h1~h6、hr、pre、address、blockquote、center、dir、menu、noframes、noscript。

常见内联元素有input span strong em a abbr acronym br img select textarea等等。

可以通过修改display属性值转行块元素和行内元素。

display的值除了block和inline，还有其他值，例如list-item、teble-cell等，但因为IE6和IE7浏览器支持的display类型很少，所以为兼容IE，真正能用的display类型只有block、inline和none三种。

IE6、IE7支持但不完全支持display:inline-block属性,但IE8+和FF等标准浏览器支持。

display:inline-block，行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值，但它却不是独占一行，它的宽度并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一里。它集块级元素和行内元素的特点于一身，是个非常有用的display类型

让IE6、IE7支持display:inline-block

利用hasLayout可以再不支持display：inline-blcok的IE6和IE7下模拟出display：inline-block的效果，实现IE6、IE7、IE8+和Firefox都兼容的display：inline-block的应用。但是也有一些问题需要特别注意：

在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。
IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效，对于块级元素(div,p,ul......)无效。 In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.
两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟inline-block块元素表现一样。2、IE6/7不完全支持inline-block，只对内联元素有效。
看官方的说法，确证对inline-block的认识。The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.
下表列出一些CSS属性及其值，以下属性一旦设置，将触发元素的layout：

CSS propertyValue

display        inline-block

height        any value

float           left or right

position      absolute

width          any value

-ms-writing-modetb-rl

zoom          any value

延伸问题：IE下块元素如何实现 display:inline-block 的效果？

有两种方法：

1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下：

div {display:inline-block;}

div {display:inline;}

说明：在IE下，display: inline-block只是触发了元素的layout。比如将display: inline-block给到div上，只能保证这个div拥有块元素的特征（可以设置宽度，高度等），但是还是行布局（产生换行）。接下来要设置display: inline，更改这个div的布局为内联布局（不产生换行）。

2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（可使用zoom:1 等）。代码如下：
div {display:inline; zoom:1;}

hasLayout

hasLayout设计的初衷是用于辅助块级元素的盒子模型的，它是用于块级元素的。如果用于行内元素，会引发一些特殊效果。（结合上面红色字体理解）

设置宽高属性width、height值都可以触发hasLayout，但是有时候带来副作用，现在常用zoom:1;来触发，极少数非常复杂的css设置情况zoom无效的时候，需要借助更为强大的“position:relative”来触发hasLayout。

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。

详见：http://baike.baidu.com/view/2945869.htm

http://www.cnblogs.com/yupeng/archive/2011/04/11/2012996.html

技巧

不确定块级元素的水平居中