css 学习之二

前段时间做了一个调整firefox下css的工作。总结了一些技巧。

1. IE6的盒模型是与是否声明doctype有关的。声明了则为标准盒模型width = content+padding+border+margin.否则与IE5一致。
2. li2> 尝试使用em声明字号时候发现，子级元素继承父级元素的大小，但是table默认是不继承外围字号的。如需要继承。可使用table{font-size:inherit;}。使用em时先定义body{font-size:63%},设为62.5%ie下字体会略小。
3. firefox和opera支持max-width和min-width，用来限制布局的过分自由。
4. 注意用多个class指定样式优先于单个class。 属性>!important>内联样式表>id>多个class>单个clas>标签
5. 导入样式表 @import url(sample.css) 尽量不使用引号。
6. 关于表格 合并边框border-collapse:collapse.
   需要固定宽度:table-layout:fixed
7. 给一些标签加入title属性大大提高了可读性。
8. link visited hover active 中间的两个不可交换顺序。
9. 容器不扩展问题。子级元素浮动，需在后面加上清除浮动的div.clear .clear{font:0px/0px sans-serif;clear:both;display:block;}
10. 高度不适应问题。内层对象设置margin和padding后外层对象的高度不重新计算。这时候也需要再上下各加入一个不占高度的div.empty。.empty{height:0px;overflow:hidden;}
11. 自动折行 IE (1)word-break:break-all;(2) white-spacing:normal FF 还需要加入overflow:auto
12. 表格固定宽度且不换行 (1) <td width="25%"> <div> content </div> </td>其中td宽度必须为百分比
13. 半透明效果的实现
    IE：filter:alpha(opacity=50);
    firefox:-moz-opacity:0.5;
14. z-index大的层，背景图片仍可能被z-index小的层遮盖