《编写高质量代码--web前端开发修炼之道》笔记-CSS

此篇为本笔记的第二篇

标准模式与怪异模式（模拟老式浏览器的行为）

如果漏写了DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE6，IE7，IE8）就会触发怪异模式

IE盒模型的解析

标准模式：网页元素的宽度有padding，border，width三者的宽度相加决定
怪异模式：width本身就包括了padding和border的宽度

组织CSS

base.css + common.css + page.css

base.css包括CSS reset、通用原子类

• CSS reset：标签在浏览器里有默认的样式，不同浏览器的默认样式会有差别。例如：ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而在Firefox下，它的缩进却是由padding实现的。
• 通用原子类：一系列常用的基本类，包括：文字，定位，宽高，边距
  文字：font-size，line-height，text-align
  定位：float，clear，position
  宽高：width，height
  边距：margin，margin-top，margin-right，margin-bottom，margin-left，padding，padding-top，padding-right，padding-bottom，padding-left

CSS命名

• 推荐使用英语，不要使用汉语拼音
• 常见命名方法：驼峰命名、划线命名（可以结合两种方法，其中驼峰命名法用于区别不同单词，划线用于表明从属关系）
• 不推荐轻易使用子选择符，多人合作时会有冲突
• 为避免多人合作的冲突，可为page层的各工程师分配一个唯一的标识符，作为前缀

多用组合，少用继承

挂多个class实现最终样式

处理上下margin

• 相邻的margin-left和margin-right是不会重合的
• 相邻的margin-top和margin-bottom会产生重合
  所以上下相邻的模块最好统一使用margin-top或者margin-bottom，不要混用

低权重原则——避免滥用子选择器

• CSS选择符权重的规则：
  标签——1
  class——10
  id——100
• 如果CSS选择器权重相同，那么样式会遵循就近原则，哪个选择符最后定义（而不是class名字挂在最后），就采用哪个选择符的样式
  <span class="test test2">与<span class="test2 test">没有区别
• 使用子选择器，会增加CSS选择符的权重，CSS选择符的权重越高，样式就越不容易被覆盖，越容易对其他选择符产生影响
• 为了保证样式容易被覆盖，提高可维护性，CSS选择符要保证权重尽可能低

CSS sprite（图片翻转技术）

• 将网站的背景图片合到一张大图片上，减少网页的HTTP请求数，减少服务器压力
• 合并的只能是用于背景的图片，对于<img src="">设置的图片不能合并
• 大图中每个小图的坐标值都不可轻易改动

CSS hack

• IE条件注释法
  <!--[if lte IE6]> <span></span> <![endif]-->
<!--[if lt IE6]> <span></span> <![endif]-->
<!--[if gte IE6]> <span></span> <![endif]-->
<!--[if gt IE6]> <span></span> <![endif]-->
<!--[if ! IE6]> <span></span> <![endif]-->
• 选择符前缀法
  *html .test{width:60px;}/*IE6*/
*+html .test{width:70px;}/*IE7*/
• 样式属性前缀法
  .test{
width:80px;
*width:70px;/*IE6，IE7*/
_width:60px;/*IE6*/
}

a标签的4种状态排序

love hate原则：l（link）ov（visited）eh（hover）a（active）te

hasLayout

触发hasLayout解决IE bug
zoom:1;
zoom无效时，可以设置position:relative;，但会有副作用

块级元素和行内元素

块级	行内
独占一行，默认情况下，其宽度自动填满其父元素宽度，即使设置了宽度，仍然独占一行	不会独占一行，相邻元素排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以正常设置margin和padding	水平方向的margin和padding会产生效果，竖直方向的margin和padding不产生边距效果

display:inline-block和hasLayout

• 为了兼容IE，display能用的类型只有inline，block，none。IE6和IE7不支持display:inline-block;
• inline-block：可以设置长宽，可以设置margin和padding值，但却不是独占一行
• 如果对行内元素触发hasLayout，就可以模拟display:inline-block的效果
  行内元素{display:inline-block;}即可触发hasLayout
  只能对行内元素实现

img标签和button标签都具有display:inline-block;的特性，可以设置长宽但不独占一行

relative，absolute和float

这个我之前写过一篇博客，列了一个表格进行了对比，传送门

补充一个position各个值的描述
position: static;

• position的默认值，元素将定位到它的正常位置，其实也就相当于没有定位
• 元素在页面中占据位置
• 不能使用top，right，bottom，left移动元素位置

position: relative;

• 相对定位，相对于元素的正常位置来进行定位
• 元素在页面中占据位置
• 可以使用top，right，bottom，left移动元素位置

position: absolute;

• 绝对定位，相对于最近一级的、定位不是static的父元素来进行定位
• 元素在页面中不占据位置
• 可以使用top，right，bottom，left移动元素位置

position: fixed;

• 绝对定位，相对于浏览器窗口进行定位，其余和absolute一样，相当于一种特殊的absolute

position: inherit;

• 从父元素继承position属性的值

居中

水平居中

• 行内元素的水平居中
  给父元素设置text-align: center;
• 确定宽度的块级元素的水平居中
  设置margin-left: auto;和margin-right: auto;
• 不确定宽度的块级元素的水平居中
  
  1. 将元素包含在table标签内，对table设置margin-left: auto;和margin-right: auto;
     增加了无语义标签，加深了标签的嵌套层数
     （table本身不是块级元素，如果不设置其宽度，它的宽度由内部元素的宽度撑起）
  2. 改变块级元素的display为inline类型，然后使用text-align: center;来实现居中。但存在副作用
  3. 给父元素设置float，然后父元素设置position: relative;和left: 50%;，子元素设置position: relative;和left: -50%;来实现水平居中。但存在副作用

竖直居中

• 父元素高度不确定的文本、图片、块级元素的竖直居中
  通过给父容器设置相同的上下内边距实现（padding-top，padding-bottom）
• 父元素高度确定的单行文本的竖直居中
  通过给父元素设置line-height来实现，line-height值和父元素的高度值相同
• 父元素高度确定的多行文本、图片、块级元素的竖直居中
  
  1. vertical-align: middle;但只有当父元素为td和th时，才会生效
     在Firefox和IE8下，可以设置块级元素的display类型为table-cell来激活vertical-align
     IE6和IE7并不支持display: table-cell;
     所以可以直接使用table，td，默认情况下已经隐式的设置了vertical-align: middle;
  2. 使用hack
     在不支持display: table-cell;的IE6和IE7下，通过给父子两层元素分别设置top: 50%;和top: -50%;来实现居中
     设置了position: relative;和position: absolute;，会有副作用

z-index

• 激活z-index属性后，如果不设置其值，那么默认为0，但仍然浮于body之上
• 如果多个元素的z-index值相同，那么HTML标签中后出现的元素，会浮在先出现的元素之上

负边距——并未激活z-index，但仍然让元素的位置发生了重叠

浏览器解析页面时，会先判断元素的类型，如果是窗口类型的，会优先于非窗口类型的元素，显示在页面的最顶端，如果同属非窗口类型的，才会判断z-index的大小（select元素在IE6下是以窗口形式显示的）

IE6下png图片透明的地方会显示为浅蓝色