css样式的书写顺序及原理
刚开始学习前端的时候，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。那么是怎么个顺序呢？
源代码奶妈
python软件下载（1）定位属性：position  display  float  left  top  right  bottom  overflow  clear  z-index
（2）⾃⾝属性：width  height  padding  border  margin
（3）⽂字属性：font-family  font-size  font-style  font-weight  font-varient  color  text-align  vertical-align    word-spacing    white-space  text-overflow
（4）背景：background border
（5）css3中新增属性：content  box-shadow  border-radius  transform……
按照上述1 2 3 4 5的顺序进⾏书写。
⽬的：减少浏览器reflow（回流），提升浏览器渲染dom的性能
oracle结构体系原理：浏览器的渲染流程为——
①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
②构建render树：DOM树和CSS树合并之后形成的render树。
③布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。transformer什么时候提出来的
④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
工作手册
css样式解析到显⽰⾄浏览器屏幕上就发⽣在②③④步骤，可见浏览器并不是⼀获取到css样式就⽴马开始解析⽽是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进⾏解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，⼀旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染正如按照这样的书写书序：width: 100px;
height: 100px;
html个人网页完整代码顺序background-color: red ;
position: absolute;
当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离⽂档流，⽽之前却是按照普通元素进⾏解析的，所以不得不重新渲染，解除该元素在⽂档中所占位置，然⽽由于该元素的占位发⽣变化，其他元素也可能会受到它回流的影响⽽重新排位。最终导致③步骤花费的时间太久⽽影响到④步骤的显⽰，影响了⽤户体验。
所以规范的的css书写顺序对于⽂档渲染来说⼀定是事半功倍的！
扩展：还有⼀个会影响浏览器渲染性能的词汇“repaint（重绘）”
repaint（重绘）：改变某个元素的背景⾊、⽂字颜⾊、边框颜⾊等等不影响它周围或内部布局的属性时，屏幕的⼀部分要重画，但是元素的⼏何尺⼨没有变。
注意：
b.有些情况，⽐如修改了元素的样式，浏览器并不会⽴刻reflow或repaint，⽽是把这些操作积攒⼀批，
然后做⼀次reflow，这也叫做异步reflow.但在有些情况下，⽐如改变窗⼝，改变页⾯默认的字体等，对于这些情况，浏览器会马上进⾏reflow.
c.为了更好的⽤户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完⼀部分内容就显⽰⼀部分内容，同时，可能还在通过⽹络下载其余内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。