css 相关

1, DTD, 不加 DTD 时，IE(6, 7, 8) 按照 quirk 模式解网页, Firefox 按标准解7 2, css 模块化，把网页中相同的部分划分成单独模块，针对模块写 css，保证 css 的重用; 模块中变化的部分分离出来 3, css 模块命名规则：camelCase 用于模块名，划线表示从属关系, 如：.timeList-lastItem{}; 模块 css 集中, 除子选择符外，模块中选择符名统一相同前缀 4, css 原子化，css 写的尽量小，类中变化的部分分离出来，多用组合，同一个元素挂多个 class，减少冗余 5, 使用 css reset，保证标签在各浏览器中初始样式一致 6, css 选择符权重：如果多个选择符选中同一个元素，而且这些选择符定义了同一个样式，这权重高的选择符中的样式生效 7, id 选择符权重 100， class 10， 标签 1, 详细见 css specification 8, 子选择符会增加权重，使用时需注意, 如 <mce:style><!-- .content{font-size:12px} .content span{ color:blue} .highlights{ color:red} --></mce:style><style mce_bogus="1"> .content{font-size:12px} .content span{ color:blue} .highlights{ color:red} </style> <p class="content">hello <span>world</span>! Nothing is <span class="highlights">impossible</span>!</p> <!-- highlights 的 span 不会成为 red，因为 .content span 的权重高于 .highlights--> 9, 如果多个选择符权重一样，后面定义的选择符的权重高于前面的；注意是后面定义的不是在 class="" 中放在后面的 10, 尽量保证选择符权重低, 提高灵活性 11, 介于垂直方向的 margin 在一些情况下会 collapse，margin-top 和 margin-bottom 同意类中只定义一个 12, 多用 class，少用 id；id 不可重用，权重高 13, css hack 方法： a, IE 条件注释 b, 类名前缀， *html .classA{ /* ie6 only */} *+html .classB{ /* ie7 only */} c, 属性名前缀， .classC{ *padding: 10px;/* ie6,7 */ _padding{ /* ie6 only */}} 14, hasLayout, IE 浏览器专有，一些 ie bug 通过使元素有 layout 可以修复; IE 中一个元素有两种方式计算自己大小和组织自己内容： a, 自己对自身的大小计算，自己组织自己内容 b, 依赖父元素 以下属性会使元素获得 layout; display: inline-block; height, width, float; position:absolute; -ms-writing-mode; zoom; // 详见 msdn 以下元素默认有 layout body and html table, tr, th, td img hr input, button, file, select, textarea, fieldset marquee frameset, frame, iframe objects, applets, embed 15, display: inline-block; 在 ie6，7 下工作方式和标准( 或者说规范)不同 a, ie6, 7 中给 block 元素设置 display:inline-block 失效 b, display:inline-block 在 ie6, 7 中作用是触发 haslayout 的，对 block 元素没有作用 c, ie6,7 中 inline 元素设置该属性值后, 其表现和 标准的 inline-block 一样 16, inline 元素 竖直方向的 padding 和 margin 会很诡异，可以通过设置 inline-block 激活 haslayout 17, top, right, bottom, left, z-index 配合 position 属性值为 relative 和 absolute 才起作用 position:absolute 相对于最近的一个设置 position 属性为 relative 或 absolute 值的祖先元素; 18, 设置 float 和 position:absolute 会自动使元素的 display 以 inline-block 方式显示，不管元素的 display 是何种值 19, ie6 下 select 元素总是会浮动在设置 z-index 的元素上，解决办法：设置一个 position:absolute 的 iframe，位于 select 之上，另一个 z-index 之下 20, Flash 总是处在最上面，解决办法，flash 以分窗口模式放入页面，即 wmode 属性值为 opaque 或 transparent