书写顺序减少浏览器回流（reflow），提高浏览器渲染dom的性能①：parsehtmltobuilddomtree,parsecsstobuildcsstree：将html解析成树数据结构，将css解析成树状数据结构②：构建渲染树：DOM树和CSS树合并后形成的渲染树。③：Layoutrendertree：有了rendertree，浏览器就已经知道那些网页中有哪些节点，每个节点的css定义和它们的从属关系，从而计算出每个节点在屏幕上的位置。④：绘制渲染树：通过显卡按照计算出的规则在屏幕上绘制内容。步骤②③④将css样式解析并显示在浏览器屏幕上。可以看出，浏览器并没有在获取到css样式后立即开始解析css样式，而是根据css样式的书写顺序，按照dom树的结构分发render样式，完成Step②、然后开始遍历每个树节点的css样式进行解析。这时候css样式的遍历顺序就完全按照之前的写法顺序了。优先级优先——定位属性：{display指定元素应该生成的框类型。position定位指定元素的定位类型。float指定框是否应该浮动。lefttoprightbottomoverflow指定内容溢出元素框时发生的情况。clear清除由z-index设置的元素的堆叠顺序。contentcontentcontentlist-stylevisibilityvisibility/display}prioritysecond-selfattribute:{widthheightborderpaddingmarginbackground}prioritythird-textstyle:{font-familyfont-sizefont-style指定文本字体样式。font-weightfont-varient指定是否以小型大写字母字体颜色显示文本}优先级4th--text属性：{text-align指定文本的水平对齐方式。vertical-align设置元素的垂直对齐方式。text-wrap指定文本的换行规则。text-transform控制文本的大小写。text-indent指定文本块第一行的缩进。text-decoration指定要添加到文本的装饰。字母间距设置字符间距。word-spacing设置字间距。white-space指定如何处理元素中的空白。text-overflow指定文本溢出包含元素时发生的情况。}优先级第五--CC3中的新属性：{box-shadow给盒子添加一个或多个阴影。cursor指定要显示的光标的类型（形状）。border-radiusbackground:linear-gradienttransform...对元素应用2D或3D变换。}CSS代码的命名约定必须以字母开头来命名选择器，以保证在所有浏览器下的兼容性；单字母类选择器不允许出现；advertising等英文单词的名字是不允许的，比如ad,adv,adver,advertising，防止了这个模块被浏览器当成垃圾广告过滤掉。这适用于任何文件命名。类名中禁止出现下划线'_'，全部小写，统一使用'-'连字符。禁止命名驼峰式className看名字就知道CSS代码注意事项不要使用完全没有语义的标签作为选择器，会造成大面积污染速记CSSColorPropertyValuesRemoveUnitswithCSSProperty取值为0有意义的名称，使用结构性或目的相关而非抽象的名称
