CSS样式书写顺序

我们知道浏览器加载的过程伴随着不断的reflow和repaint过程，让我们再次回顾一下这两个概念：
repaint(重绘) ：repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)：与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

何时发生：

1. DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
3. 应用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、滚动页面
5. 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

如何避免：

1. 先将元素从document中删除，完成修改后再把元素放回原来的位置
2. 将元素的display设置为”none”，完成修改后再把display修改为原来的值
3. 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document 　　

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode(‘keenboy test 111’));
fragment.appendChild(document.createElement(‘br’));
fragment.appendChild(document.createTextNode(‘keenboy test 222’));
document.body.appendChild(fragment);

1. 集中修改样式
   　　4.1尽可能少的修改元素style上的属性
   　　4.2尽量通过修改className来修改样式
   　　4.3通过cssText属性来设置样式值
   　　　　element.style.width=”80px”; //reflow
   　　　　element.style.height=”90px”; //reflow
   　　　　element.style.border=”solid 1px red”; //reflow
   　　　　以上就产生多次reflow，调用的越多产生就越多
   　　　　element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow　
   　　4.4缓存Layout属性值
   　　　　var left=elem.offsetLeft; 多次使用left也就产生一次reflow
   　　4.5设置元素的position为absolute或fixed
   　　　　元素脱离标准流，也从DOM树结构中脱离出来，在需要reflow时只需要reflow自身与下级元素
   　　4.6尽量不要用table布局
   　　　　table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
   　　4.7避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)

—————————华丽的分隔线————————–

在应用CSS样式的过程中，也会多次触发reflow和repaint，我们应尽量把影响布局的内容放到前面，而把一些颜色设置放到后面，这以减少reflow的次数。看一看Bootstrap对css规范的要求吧：

相关的属性声明应当归为一组，并按照下面的顺序排列：
1. Positioning
2. Box model
3. Typographic
4. Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px “Helvetica Neue”, sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;
}

前端并不是html,css,javascript三者的拼凑，一个好的网站应该非常注意细节，优雅的代码才能带来更好的性能体验，也会使代码的可维护性大大增强。

CSS改变文字大小写

CSS改变文字大小写，这个的确不常用，算是个冷门的知识点吧，了解一下就行了。
text-transform属性

text-transform: uppercase 会把文字变成全大写 text-transform: lowercase 变成全小写text-transform: capitalize 变成首字母大写

另外段落首行缩进应该很low了，权切列出来吧：

p{text-indent:2em;}