css原理(转)

　一、浏览器的发展与CSS

  省

　二、浏览器是如何渲染页面和加载页面

　　为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：

　　1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

　　2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。

　　3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

　　4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。

　　5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

　　6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

　　这里关键的是第2-5这三点。渲染效率与下面三点有关：

　　1. CSS 选择器的查询定位效率

　　2. 浏览器的渲染模式和算法

　　3. 要进行渲染内容的大小

　　三、什么是 CSS 以及 CSS 的优点

　　什么是 CSS？

• CSS 是 Cascading Style Sheets(层叠样式表)的简称。
• CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。
• 在标准网页设计中 CSS 负责网页内容 (XHTML)的表现。
• CSS 文件也可以说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必须使用 css 为文件名后缀。
• 可以通过简单的更改 CSS 文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计人员的必修课。
• CSS是由W3C的CSS工作组产生和维护的。

　　采用 CSS+DIV 进行网页重构，相对与传统的 TABLE 网页布局而具有以下3个显著优势：

　　1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

　　2. 提高页面浏览速度。对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

　　3. 易于维护和改版。你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。

　　四、浏览器对 CSS 的匹配原理

　　浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找 html 中所有 class=’red’ 的 span 元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有 id 为 divBox 的 div 元素，如果都存在，则 CSS 匹配上。

　　浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span.red。

　　五、优化你的 CSS

　　所谓高效的 CSS 就是让浏览器在查找 style 匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写 CSS 犯一些低效错误：

　　1、不要在ID选择器前使用标签名

　　一般写法：DIV#divBox

　　更好写法：#divBox

　　解释：因为ID选择器是唯一的，加上div反而增加不必要的 CSS 匹配。

　　2、不要在 class 选择器前使用标签名。前端UI分享

　　一般写法：span.red

　　更好写法：.red

　　解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

　　p.red{color:red;} 　　span.red{color:#ff00ff}

　　如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

　　3、尽量少使用层级关系

　　一般写法：#divBoxp.red{color:red;}

　　更好写法：.red{..}

　　4、使用 class 代替层级关系

　　一般写法：#divBox ul li a{display:block;}

　　更好写法：.block{display:block;}

　　5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的

　　class 会在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微          妙的速度优势）。

       6、css 命名 、书写规范；（好的代码看上去就很整齐 很有条理性这样方便日后的维护和管理）

      7、css优先级； 选择器权重：内联样式：1000，id选择器：1000， class选择器：10，标签选择器：1           注意权重的问题。

       8、少用滤镜，少用hack，少用position：absolute；。
       9、多用继承属性。
       10、使用简写样式：例如margin: 10px; 浏览器会解释为上下左右各有10px的外补丁。margin： 0 10px        浏览器解析为 左右有10px的外补丁。

       11、不要在ID选择器和class选择器前 使用标签名 例如：div.box { color: #f00; }; 直接 可以 用类名，                  .box{ color:#f00;}  这样浏览器找到这个class后 就不用再匹配是否存在div标签.从而提高了渲染效率。当然同一级的                  有不同的样式可以这样写，但是不建议这样。

       12、css的层级关系不要太深 用class直接代替多余的层级元素。

        例如 .box .box-con .box-list li { line-height: 24px; } 这么长。。。增加代码量减小开发效率。刚也说了，         css渲染是从上到下，从右到左的

       所以直接这样写就可以了.box-list li { line-height: 24px; };

       13、平铺背景图片不要过小，影响渲染速率。
       14、float使用要谨慎。
       15、合理化布局（模块化布局）；可以把样式划分为 基类 和扩展类 ;模块化布局 ：模块基本相同的样式         写在 基类里，不同的在重新用class来定义称为扩展类 。

 

 //todo

 

 

    更基础属性元素： http://ce.sysu.edu.cn/CMSDesign/Item/667.aspx

  IE和火狐的css兼容性问题