文件名称：CSS圣经编写高质量代码
文件大小：17.52MB
文件格式：PDF
更新时间：2021-06-01 04:06:03
CSS 1、怪异模式和DTD 标准模式：浏览器根据规范表现页面 怪异模式：模拟老浏览器行为防止老站点无法工作（为了兼容老式浏览器的代码），如果漏写DTD（Document Type Definition文档定义类型）声明，firefox会按照标准模式来解析网页，但在IE中就会触发怪异模式。 两种模式的差异比较大，比较典型的是IE对盒模型的解析；在标准模式中，网页元素的宽度是由padding、border、width三者的宽度相加决定的，而在怪异模式中，width本身就包括了padding和border的宽度 2、如何组织CSS？ 按功能划分：font.css color.css layout.css 等 按区块划分：head.css foot.css sidebar.css main.css等 作者建议:base.css + common.css +page.css base层提供CSS reset功能（覆盖浏览器默认样式）和通用原子类（文字、定位、长宽、边距）,具有高度可移植性 common层是网站级的，不同的网站有不同的common层，同一个网站只有一个common层；网站中高度重要的模块，称之为组件 page层位于最高层，提供页面级的样式 3、模块化CSS 拆分模块的技巧： ①模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将他们提取出来，拆分成一个独立的模块 ②模块应该在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性 CSS命名规则 ①推荐使用英语 ②驼峰命名法 用于区别不同的单词，划线用于表明从属关系 ③如何避免多人合作时命名冲突？可以使用姓名首字母缩写做为标识符，比如zzl-timeList-lastItem 多用组合，少用继承 如何处理上下margin？ margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-booton会产生重合； 所以最好统一使用margin-top或者margin-bottom，不要混合使用 总结：如果不确定模块的上下margin特别稳定，最好不要讲它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如：mt10、mb20）, 模块最好不要混动margin-top或者margin-booton，统一使用margin-top或margin-bootom 4、低权重原则--避免滥用子选择器 CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。权重规则：HTML标签权重是1，class权重是10，id的权重是100， 例如：p的权重是1，『div em』的权重是1+1=2，『strong.demo』的权重是1+10=11，『#test.red』的权重是100+10=110 如果CSS权重符相同，那么样式会遵循就近原则（选择符定义的先后顺序，而不是class名的先后顺序，和是一样的），哪个选择符最后定义，就采用哪个选择符的样式 使用子选择器，会增加CSS选择符的权重，CSS选择符的权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。 为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权重尽可能低 5、CSS sprite 最大好处是减轻服务器的压力，对于流量不大的网站来说，CSS sprite带来的好处并不明显；所以是否使用CSS sprite主要取决于网站流量 将网站的背景图 合到一张大图片上。对于流量大的网站来说，改技术很有价值 ①能合并的只能是用于背景的图片，对于