谢锋的博客——关注xhtml+css、用户体验、电子商务

之前把css整理了一下，不过没整理完，今天继续把css整理一下。

1、:first-letter 伪对象仅作用于块级元素，内联元素如果要使用必须先定义成块级元素或position属性为absolute才有效。而且:first-letter跟{….}之间必须存在空格或回车，不然ie不认识它

2、z-index只作用于position属性为absolute、ralative、fix元素

3、在ie6中，定义行高只对文字有效，但定义文字大小却同样对图片有效

4、父层的div使用了相对定位并触发了layout，列表里的某些元素或者所有的元素的背景会消失（包括背景图片）。类似的问题还存在于<ul>、<ol>中。解决非的方法也很简单：只要对<dl>、<ul>、<ol>也使用相对定位或者触发layout就可以解决问题。

5、行内元素定义宽度并不会触发layout。

6、流出来的元素是不占空间的。

7、<!–hi ie,please go to Quirks Mode–>不管是ie6还是ie7都会进入Quirks Mode，在这种情况下，盒子模型会发生变化，border跟padding都会算在宽度里面(一般情况下只包括border)。在此情况下的ie7也比较聪明，也认识*html div{}这样的选择符(通常情况下只有ie5、ie6认识)。在Quirks Mode下的ie都不支持min-height.

8、ul标签在firefox中默认是有padding值的，而在ie中只有margin默认有值，form标签在ie中将会自动产生margin值，而在firefox中margin则是0，所以一般先定义*{margin:0;padding:0;}。

原创文章，转载请注明：来自谢锋的博客

本文链接地址：http://www.onlycss.cn/2010/04/css-note2/

随着web标准的流行，xhtml+css已经被运用到许多网站（包括电子商务网站），在很大程度上代替了传统用表格布局，相对来说用xhtml+css布局的好处这里就不再说了。

代码的优化也是网站优化的一部分，代码的优化一般包括：标签是否运用合理、代码的压缩等。特别是对于大型网站，代码的压缩是很重要的一部分，所以了解一些css属性的缩写，这有利于压缩代码，为网页减肥。
下面是一些常用css属性的缩写：

一：边框border缩写
border:border-width|border-style|border-color  例如：border:1px solid #000;

二：背景background缩写
background:background-color|background-image|background-repeat|background-attachment|background-position
例如：background:#f00 url(background.gif) no-repeat fixed 0 0;

三：字体font缩写
font:font-style|font-variant|font-weight|font-size|line-height|font-family
例如：font:italic small-caps bold 12px/1.5 sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

四：列表list缩写
list-style:list-style-type|list-style-position|list-style-image
例如：list-style:square inside url(image.gif);

五：外边距margin与内边距padding缩写
margn外边距与padding内边距是制作布局时常用到的两个属性，传统的写法如下：
margin:margin-top | margin-right | margin-bottom  |  margin-left
padding: padding-top | padding-right | padding-bottom | paddin-left
margin与padding可以带一个、二个、三个、四个参数，各有不同的含义。
一个参数时，例如我们常用到的*{margin:0;padding:0;}表示margin-top、margin-right、margin-bottom、margin-left和padding-top、padding-right、padding-bottom、paddin-left都一样为0。
两个参数时，例如：*{margin:10px 5px; pdding:10px 5px;}表示margin-top、margin-bottom、padding-top、padding-bottom为10px，margin-right、margin-left、padding-right、paddin-left为5px
当三个参数，例如：*{margin:10px 5px 6px; pdding:10px 5px 6px;}表示margin-top、padding-top为10px，margin-right、margin-left、padding-right、paddin-left为5px，margin-bottom、padding-bottom为6px.

以上为一些常用的css缩写，欢迎交流！
原创文章，转载请注明：来自谢锋的博客
本文链接地址：http://www.onlycss.cn/2010/04/css-abbreviation/

今天打开以前自己做的css笔记，一看真的是乱七八糟，一塌糊涂，还是整理一下容易错的css吧。

一：对ul设置list-style-image时，在IE和FF效果不同，所以需要结合padding对li单独设置。

二：top、right、bottom、left这4个css属性，它们都是配合position属性使用的，表示的是各个边界离页面边框（当position设置为absolute时）的距离，或各个边界离原来位置（position设置为relative时）的距离。只有当position属性设置为absolute或relative时才能生效。鉴于浏览器之间的差异，建议在设计时只设置left和right中的一个，以及top和bottom中的一个。

三：vertical-align在目前的浏览器中，只能用表格单元格中的对象竖直方向的对齐设置而对于一般的块级元素如div等是不起作用的。解决请看之前的多行文字垂直居中

四：body是一个特殊的盒子，它的背景颜色会延伸到margin的部分，而其它的背景只会覆盖padding＋content部分（IE中）或者border+padding+content部分（firefox中）

五：在IE6中，虽然链接设置成块级元素，但是仍然只有在鼠标指针经过文字，才能触发鼠标经过效果，而不是进入矩形区域，就可以触发。在IE7中已经修正了这个bug，解决IE6的这个bug只需在a中增加一条css规则：height:1em;

六：Firefox和IE7都支持td的:hover（但IE7要支持td:hover必须正确设置Doctype设置成xhtml1.0 trantional即可，如果没有设置Doctype，将会和IE6一样，不支持td:hover)

七：确保在单词之间的空白处不换行，则在a,a:visited的样式中增加css规则：white-space:nowrap;

八：行内元素是不能指定宽度的，但是带有容错的IE6却可以

九：<script language=”javascript”>……</script> 不能通过w3c
       <script type=”text/javascript”>……</script> 能通过w3c

原创文章，转载请注明：来自谢锋的博客

本文链接地址：http://www.onlycss.cn/2010/04/css-note/

单行文字垂直居中可以使用line-height来得到效果，当然也可以通过设置padding来处理，不过对行多行文字垂直居中的话，行高line-height就不适合了，在没有定义高度的情况下，可以使用padding来处理。当有定义有高度的可以分为两种情况：一：非IE浏览器这个比较简单，在设置vertical-align:middle;外还应把它的display属性设置为表格的table-cell属性就可以觖决。但是注意当 display属性为table-cell时，边框的宽度是算在width里面的二：IE浏览器 IE确实是个让人比较烦的家伙，特别是IE6，但没办法，目前使用IE6的人还是最多的 。

例如在如下html结构：

<div id=”vertical”>

<div class=”kong”></div>

<div class=”content”>受《赢在中国》这个节目主题曲――《在路上》的希望能够在这条道路上慢慢成长、慢慢走下去！同时记录我在这条路上走过的痕迹、记录我在这条道路上的成长！</div>
</div>

多行文字垂直居中相应的css代码为：

#vertical{ height:120px; display:table-cell; vertical-align:middle; border:1px #F00 solid;}

.kong{ height:100%; width:0; display:inline; vertical-align:middle; zoom:1;}

.content{ width:100%; zoom:1; display:inline; vertical-align:middle;}

多行文字垂直居中效果如下图所示：

多行文字垂直居中原理：当.kong元素的宽度为0，高度为100%时，这样就占据了整个容器的左边的一条看不到的线，display:inline后的元素依然可以使用高度，由于这时div已经变成了行内元素,vertical-align:middle自然就生效了，zoom:1是为了触发hasLayout的一个方式。

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2010/03/vertical-align/

这个奇怪ie6 3px bug问题是我不小心发现的。

代码如下：

<div style=”width: 200px;”>
<div style=”float: left; width: 100px;”>浮动元素</div>
<!– –>
<div style=”float: left; width: 100px;”>出现IE6 3px bug一个奇怪问题</div>
</div>
IE7会出现如下效果(正常)：

ie7-3px-bug

IE6会出现如下效果：

ie6-3px-bug

可以看到IE6多了一个“题”，这就是所谓的3px bug，为什么会这样呢？
原来是这样：当多个浮动的元素相邻，中间加注释的时候，最后一个浮动元素内的文本可能会复制到最上面去。在 IE6里，注释会给当成像文本一样存在，但不会显示。浮动元素后面如果是文本的话，将会多占据3px的空间，但注释是特别的元素，结果就多了一个“题”。
解决3px bug的方法：可以给最后一个浮动元素加上margin-right:-3px;或者让里面的浮动元素的总宽度小于父层的宽度。

原创文章，转载请注明：转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2010/03/3px-bug/