CSS bug顺口溜 （转）

　　一、IE边框若显若无，须注意，定是高度设置已忘记；

　　二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

　　三、三像素文本慢移不必慌，高度设置帮你忙；

　　四、兼容各个浏览须注意，默认设置行高可能是杀手；

　　五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

　　六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

　　七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

　　八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

　　九、IE浮动双边距，请用display：inline拘。

　　十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

CSS矩阵布局的畅想

翻译自http://snook.ca/archives/html_and_css/matrix-layouts/ 转载请注明出处

这篇文章不是你所想的。这也不是一些您可以执行的便捷小巧的CSS技术。反正。这是一个想法，我一直在努力。一个想法-我所希望实现的-有一天你和我能够建立更好的网站。

我来说说我自己的设计想法。

嗯，为什么？

谁能整好知道他们要做些什么吗？显然，我会的。这是好事。有些人抱怨并事实没有提供解决方案。利用CSS的布局也有其不足之处。我深入过基本的table布局。float和基本定位的布局。我清楚存在的局限性。但我很少抱怨它。

我喜欢其他更好的吗？是的。我不会抱怨。这是我提出的一个解决办法。埃里克罗迈耶想要一种布局系统，我将尽力给他想一个（和我们其他人也可以享受它） 。

我们已经有布局的方式难道不接近W3C吗？

是。我们模板（即高级）的格状布局和定位模块。我认为，前者是过于复杂，而后者必须定义（也是不太方便） 。

很难提出一种布局，使它的规范接近现有的系统，这是近一个月以来罗迈耶的missive （疯狂的想法提出） 。每当我有时间（比如驾驶，睡觉前，在卫生间），我想尝试，并弄通它怎样实现。这是令人惊讶的。偶尔我会想到一个主意。我想怎样实现继承，怎样与其他系统定位，并设想将原有思想打破。

然后，灵感突现。那天晚上我花了一个小时把我的想法写下来。我讲给这几个人。没有人理解。我画了草稿一些人明白了，但他们仍然不是很清楚。我调整了一些，并增加更多的使用情况。我一个个地讲给他们 （但，他们并不完全理解我的想法。 ）我愿意分享给大家。

那么，什么是矩阵布局呢？

矩阵布局就像基本table布局结合绝对定位。它只会增加一个属性，并尝试实现现有的概念（margin，padding，border和其他的属性） 。他将为你所有的模板提供完美的解决方案吗？不，我已经看到的有些地方是不合适的。但它会比我们现在用的要好。

以下就是基本的创意 ：你用定位属性把每个格子放到应该在的位置。让我们来看看下面的例子。

例如布局3列和第二栏中有三小格。
这是一个3栏的设计，但中列有一行标题。我用字母来标记他们的顺序。现在，让我们用矩阵布局的观念来看看，写出如下代码：

#a { position: matrix(1,2, 1,4); }
#b { position: matrix(2,2); }
#c { position: matrix(2,3); }
#d { position: matrix(2,4); }
#e { position: matrix(1,1, 2,1); }
#f { position: matrix(1,5, 2,5); }

这个大块被每行每列的最高数目分成一个个小格子。矩阵值是二维的。第一维是它的左上角，第二维是它的右下角，第二维没有了就用第一维。（换句话说，只表示一块区域。）

如果你已经看到了这个先进的布局草案，你可能会看到一些小的相似之处。这不是强大的高级布局，但希望这简单的改进能够尽早实现。这种看起来像表的基础的布局，但它有独立的序列（这个例子中没有其他属性） 。

工作进展

这的确是一项进展中的工作。将继续发展;我再完善这个想法。我脑子里很清晰，却表达不清。

确实有很多需要改进。我能马上想到一些。负数margin怎么解决呢？我不知道。如果box的数量不增加高和宽又怎样变化呢？我更怀疑，但我不知这些方案当前浏览器支持不支持。

目标

最后，我想浏览器开发者能整合矩阵布局到下一个版本的浏览器。我提出这个想法，希望能够推广，让反得到馈，并逐渐壮大。

让一起加油吧。

常用CSS缩写语法总结

我们在设计CSS时可以使用css缩写,这样可以减少你CSS文件的大小，而且更加容易阅读和查找。

css缩写的主要规则如下：

margin/padding
通常写法,会遇到以下三种情况

margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;

margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;

那么我们进行CSS缩写后会让你目惊口呆的效果.如下

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

书写顺序是 margin:上 右 下 左 ,

在CSS中.值为0的时候可以将单位省略不写就像第三种写法一样.

其中padding和margin基本是一样的写法

怎么样.是不是大吃一惊.是的.CSS缩写就是这样做到的.

border
通常写法:

border-width:1px;
border-style:solid;
border-color:#000;

缩写后:

border:1px solid #000;

书写顺序:border:宽度 边框线种类 颜色;

Background
通常写法:

background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0 0;

缩写后:

background:url(bg.png) #00f no-repeat 0 0;

书写顺序:background:背景图片 颜色 重复类型 定位;
background:image color repeat position;

Font
通常写法:

font-family:"宋体";
font-size:2em;
line-height:180%;
font-weight:800;


缩写后：

font:800 2em/180% "宋体";

书写顺序:font:加粗 字体大小/行高 字体;

在使用Font缩写时至少要有 字体大小和字体这两项

font:字体大小 字体;

Color
通常写法:

color:#000000;
color:#001188;

缩写后:

color:#000;
color:#018;

16进制的色彩值时，如果每两位的值相同，可以缩写一个

转自365css 原帖地址http://www.365css.cn/post/645.html