最近温习下CSS
首先要温习浏览器的相关知识，每个浏览器的内核都有两个引擎，一个是呈现(渲染/排版)引擎，用来渲染HTML和CSS Layout的，一个是JavaScript引擎（大部分采用C/C++编写），最早的时候JavaScript引擎是包含在呈现(渲染)引擎里的，随着JavaScript的繁荣发展，JavaScript的解析执行效率俞显得至关重要，所以就从中独立出来。总结一下5大主流浏览器的呈现引擎和JS引擎，让自己巩固一下。Apple Safari（英文原意为旅行，狩猎）的呈现引擎是Webkit(Mac OS X Lion系统中的Safari采用Webkit2代内核引擎，还在使用正统webkit的safari windows版已经停止更新)，JS解析引擎是Nitro(也叫Squirrel Fish Extreme，在Safari4中发布，Safari5中提升性能，包括字节码优化和上下文线程的本地编译器)；Google Chrome （英文原意为化学元素“铬”）的呈现引擎也是Webkit（Chrome 28+采用Blink呈现引擎）,JS解析引擎是V8(采用真实汽车8缸V8引擎的名字，自Chrome2开始，使用新一代垃圾回收机制，可确保内存高度可扩展而不会发生中断，号称速度最快的JS引擎，但现在基本都差不多了)；Microsoft Internet Explorer（英文原意为网络探险者）的呈现引擎是Trident（英文原意为三叉戟），JS解析引擎是Chakra（IE9+,是注重后台编译和高效的类型系统，速度比IE8快10倍）；Mozilla Firefox的呈现引擎是Gecko（英文原意为壁虎），JS解析引擎为JagerMonkey（第一代引擎是由JS之父布兰登艾奇用C写的SpiderMonkey，后来又发展到TraceMonkey,再后来Mozilla将自己的TraceMonkey和苹果的JSCore结合起来，融合成新的JagerMonkey，从3.5版本优化来，结合了快速解释和源自追踪树trace tree的本地编译）；Opera（英文原意为歌剧院）的呈现引擎是Presto（英文原意为快速的），JS解析引擎是（Carakan，也曾号称是最快的JS引擎，采用基于寄存器的字节码和选择性本地编译方式，效率比10.50版本提升75%），不过后来Opera在拥有全球3亿用户的情况下，宣布拥抱所谓的“事实标准”，也就是内核架构采用webkit+v8，这还不算完，令人大跌眼镜的还在后头，当Google Chromium 宣布Version 28+放弃Webkit而采用基于Webkit的Blink的后没几天，Opera又蛋疼了，它宣布将紧随Chromium的脚步= =。每个浏览器的每个版本之间在渲染HTML结构和CSS Layout，以及编译、解析JavaScript的时候都有着细微或巨大的差别，其中现代浏览器(标准兼容浏览器)的差别较小，IE各版本之间以及IE同其他现代浏览器之间却有着千差万别，究其责任在微软。现今IE6 8 等还占据着浏览器市场的半壁江山，可喜的是它们的市场占有率正逐日减少，如今作为新老版本帝的FF和Chrome都是web前端开发者最常用的浏览器。
这里值得一提的是Chrome家族和FF的各分支情况，Google Chrome（以下简称为Chrome）是一个完全闭源的浏览器，它的源代码全部来自Google的Chromium开源项目，Chromium（蓝灰色转盘）更新速度超快，一些新特性、新功能会首先在其身上测试，然后Chrome就会从其代码中拿来一部分为己所用（关键是你不知道Google到底拿了哪些部分）。Chrome截止目前总共有4个分支：
1.Stable(稳定版/正式版)
2.Beta(测试版)
3.Dev(开发版)
4.Canary(金丝雀版，金色转盘)，
他们的更新速度依次从慢到快，稳定性也逐级递减。Stable、Beta、Dev这3个分支之间不能共存，因为它们被默认安装在同一个目录下，而它们却可以同Canary共存，因为Canary被安装在其他目录，这Chrome的4个分支都可以和Chromium共存，因为Chromium和Chrome是两个不同的浏览器。Chromium的更新速度应该稍快于Chrome Canary，Chromium也有两个大分支和众多小分支，其中一个大的分支是trunk分支，这个分支更新得太疯狂，BUG灰常多，一般不建议使用；另一个大的分支是众多的release版本，具体的release版本是通过trunk分支的某个revision建立的，它们都有一个对应的release版本号，并且经过相对严格的测试，相对BUG较少较稳定。Chromium没有内置自动更新机制(便携版除外)，需要下载自动更新器进行更新。最奇葩的是Canary这个极不靠谱的分支是我平生使用的第一款不能以常规方式设置为默认浏览器的分支= =，不知道以后会不会有别的，虽然早前Google放出消息说等Mac版的Canary分支出来后就会添加这一功能，但到目前为止还是没有实现，Google官方曾解释道因为这个浏览器本身极不稳定而且也没有作为默认浏览器使用的必要，而且即使在出现严重问题的时候也不一定会修复并推送新版。大路不通，我们却可以另辟蹊径，我们可以借助某些软件或者修改注册表来达成目的：将HKEY_CLASSES_ROOT\ChromiumHTML....\shell\open\command这个值的路径修改为canary.exe的路径就OK了。
相比Chrome家族来说，FF就乖很多了= =，FF到目前为止总共只有4种分支，而且他们之间也是不能共存的。
1.Nightly(每夜版，图标为深蓝色的星球，因其每天晚上都有更新而得名)
2.Aurora(极光版，图标为屎黄淡紫色的星球)
3.Beta(测试版)
4.Stable(稳定版/正式版)，
它们的更新速度依次从快到慢，稳定性逐级递增。
好了，接下来在巩固模式之前还要温习的是HTML中的很重要的<meta>标签，<meta>标签的作用是描述关于HTML文档的元信息，不显示在页面上。比如：文档的作者、关键字列表、失效日期、语言、编码等。格式形如<meta name="" Content="">, http-equiv/name 属性指定元信息名称；content属性指定元信息的值，比如说<meta http-equiv="content-type" content="text/html; charset=utf-8 />，这里的元信息名称就是content-type头，即MIME类型(玩过PHP等语言的上传下载的都知道)，元信息的值就是text/html， 如果元信息的值指定为application/xhtml+xml，例如<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />，在Chrome、FF、Safari、Opera、IE9+中会触发XML模式，IE678等屌丝浏览器都不支持。
到目前为止，所有浏览器都有三种工作模式：
1.标准模式(Standards Mode，HTML5中称其为“非怪异模式(no quirks mode)”)；
2.接近标准模式/准标准模式(Almost Standards Mode，用传统方法实现单元格的垂直尺寸计算，没有严格遵循CSS2标准，HTML5中称其为“有限怪异模式(limited quirks mode)”)；
3.混杂模式/怪异模式(Quirks Mode，不同浏览器实现的怪异模式也不尽相同，怪异模式不遵循当前的web规范，以避免破坏根据20世纪90年代末的流行方式创建的web文档)；
其中除IE67没有接近标准模式之外，其他所有浏览器都有这三种模式，标准兼容浏览器(现代浏览器)在三种模式之下的盒子模型虽然也有异同，但差距不至于过大，主要差距体现在CSS的布局和解析中，(Chrome稍微厉害点)，而IE的怪异模式下采用的是完全不同的盒子模型，IE6789一直在进步，但是改进的只是标准模式，越来越接近W3C标准，它的怪异模式却永远冻结在了IE5.5版本上，所以如果你一不注意，就会让你的浏览器回到IE5.5那个老古董。IE6789以及IE10兼容模式下 在缺少DTD的情况下默认采用IE5.5Quirks模式；IE10改进了IE5.5 Quirks模式，提供了增强的HTML5支持，称之为“Quirks模式”，在没有DTD的情况下默认采用“Quirks模式”。触发浏览器进入怪异模式主要是HTML的DTD头文档缺乏或者格式错误，不过在HTML5中统一采用简化的DTD<!DOCTYPE html>(大小写不敏感)，浏览器一遇到这个标志就自动触发标准模式。
条件注释可以用来很方便地判断IE浏览器<!--[if IE]><![endif]--><!--[if IE 6]><![endif]--><!--[if lte IE 6]><![endif]--><!--[if gte IE 6]><![endif]--><!--[if (IE 6)|(IE 7)]><![endif]-->。margin,padding可以针对块状元素和内联元素，块状元素的左右外边距不会合并，会叠加，而垂直外边距会合并，哪个大哪个生效。行内元素实际(严格)上不占上下外边距。行内元素的左右外边距不会合并，也会叠加，float之后的元素外边距也不会合并。可以指定负边距，浮动元素居中，某些选项卡就是用的负边距。float标准盒子模型中块状元素的width和height是不包括border和padding的，float的本质是破坏，float之后的元素算是脱离了文档流，不过又和position:absolute;position:fixed;position:relative;不太一样，float会对其他元素造成影响；后者被称为具有定位性质的元素也即定位元素，即position属性值不为"static"的元素，定位元素会生成一个定位框，从外到内依次为包含块(containing block)元素的边界=>定位元素的置入值=>定位元素的margin=>定位元素的border=>定位元素的padding=>定位元素的content，包含块可能是父元素也可能不是。绝对定位是完全脱离文档流，元素完全“凌空”，不影响其他元素，当没有为元素显式设置置入值(left/right/top/bottom)时，它的默认值为auto，比如说如果只设置了一个left:0;那么其他三个置入值即为auto，这个auto位置的具体确定在w3c官网上有一套复杂的算法，如果只声明了比如position:absolute;而一个置入值也没有声明的话，它自身的定位以及margin的参照物即为最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框(祖先元素的padding有效)。相反，如果定位元素显式声明了置入值(left/right/top/bottom)，那么那个被显式声明的置入值(哪怕只有一个)的参照物为最近的具有定位性质的祖先元素(忽略祖先元素的padding)，如果没有具有定位性质的祖先元素，那么其置入值的参照点为html文档的(0,0)点，不是<html>标签区域的(0,0)点，也不是<body>标签区域的(0,0)点，相对定位也是完全脱离文档流，但只是相对自身原始位置的偏移，可以说是灵魂出窍，original position仍然占位。如果position:fixed不兼容IE6，可以利用JS来完美解决：div{position:absolute;left:expression(eval(document.documentElement.scrollLeft+100));top:expression(eval(document.documentElement.scrollTop+100));}但是固定效果不太完美，会一抖一抖的，解决办法：为html和body元素加一个background-image属性。html,body{background-image:url(about:blank);background-attachment:fixed;}div{positon:absolute;left:expression(eval(document.documentElement.scrollLeft+100));top:expression(eval(document.documentElement.scrollTop+100));}，这样就可以让这个div固定在（100,100）点了。定位元素的z-index如果不设置的话默认是HTML元素后边的覆盖在前边之上。内联元素float之后就会生成一个块状框，float之后未设置height的父元素会塌陷可以用这三种常见方法来解决：1.在外边套一层div，设置宽度，里层原来是复层的div也设置浮动。2.在最后边的一个子元素后再增加一个float层，用来清除float。3.after伪元素清除浮动。
CSShack中*和_都是IE6认识的，但IE7只认识*，zoom:1；总是能触发haslayout(IE特有的有布局特征的元素)，主要用在IE6中。min-height和min-width的效果要注意IE6的兼容性，min-height可以这么解决<div style="border:2px solid red;min-height:200px;_height:200px;width:200px;"></div>；min-width要稍微复杂点，可以这么解决：1.<div style="border:2px solid red;display:inline-block;*display:inline;zoom:1;min-width:200px;_width:200px;white-space:nowrap">lalalalalla</div>。2.绝对定位<div stylel="border:2px solid red;position:absolute;min-width:200px;_width:200px;white-space:nowrap;">lalalalalaa</div>。3.浮动<div style="border:2px solid red;float:left;min-width:200px;_width:200px;white-space:nowrap;">lalalalalalal</div>。
CSS中属性都有默认值，不设置的时候就是默认值，设置为默认值就等同于没设置，white-space,word-wrap,word-break这三个属性的区别要记牢，white-space属性有6个值，normal,pre,nowrap,pre-wrap,pre-line,inherit，最常用的是white-space:nowrap;用来强制文本不换行，直到遇到<br />，normal是默认值，空白符序列会被浏览器合并成一个，效果跟pre-line一样。pre，空白会被浏览器保留，类似<pre>标签，pre-wrap，保留空白符序列，但是正常进行换行，inherit，从父元素继承的值，对于英文的话这三个有细微差别，对于亚洲文字比如中文的话只有一个办法让其不换行，就是white-space:nowrap;记住这个就好。
最后再复习下css中的几个简写属性：1.background-attachment,background-color,background-image,background-position,background-repeat,CSS3中增加的有:background-clip,background-size,background-origin,Multiple backgrounds。for example:background:#ccc url(a.png) repeat-x fixed top;
2.font-size/line-height,font-family,font-style,font-weight,font-variant,for example: font:italic bold 12px/12px arial,sans-serif; 3.list-style-type,list-style-position,list-style-image, for example: list-style:square inside url(a.png); 4.border-width,border-style,border-color, for example: border:2px solid red;
浙公网安备 33010602011771号