浏览器渲染过程不同浏览器的渲染过程其实是不一样的，但还是有一些部分是一致的。大致过程如下：浏览器解析HTML文档的源代码，然后构造生成DOM树。DOM树的构建过程是一个深度遍历的过程。当前节点的所有子节点构造完成后，将构造当前节点的下一个兄弟节点。接下来，浏览器开始解析CSS文件的内容。一般来说，浏览器会先搜索内联样式，然后搜索CSS文件中定义的样式，最后搜索浏览器的默认样式，构建CSSRuleTree。然后根据CSSRuleTree和DOMTree构建RenderTree。并不是DOM树的所有节点都会被放入RenderTree中，比如header标签，display:none标签等。构建RenderTree后，浏览器已经可以知道页面中有哪些节点，CSS样式每个节点及其从属关系，从而计算出每个节点在屏幕上的位置。最后根据计算出的位置调用系统的API，将各个节点绘制到屏幕上。上诉程序是逐步完成的。为了更好的用户体验，渲染引擎会尽早将内容呈现在屏幕上。它不会等到所有html都被解析后再构建和布局渲染树。相反，解析完一部分后，渲染一部分内容。reflow和repaint回流（reflow）：如果改变了影响元素布局信息的CSS样式，比如width、height、left、top等，元素的位置信息就会改变，也可能导致整个页面其他元素的位置信息发生了变化，渲染引擎需要重新执行布局过程，重新计算各个元素的位置。Reflow就是在浏览器绘制下一帧时重新布局。如果修改了元素的布局样式，立即获取到offsetTop、scrollTop等属性，渲染引擎会强制重新布局过程，以确保在JS中获取到正确的offsetTop、scrollTop等属性值。重绘：当改变元素的背景色、文字色、边框色等属性，但不影响其周围或内部布局时，需要重绘屏幕的一部分，但元素的几何尺寸不会改变.带有display:none的标签不会添加到渲染树中，也不会触发回流。带有visibility:hidden的标签会被添加到RenderTree中，不会触发reflow，只会触发repaint。减少reflow/repaint如果需要经常修改DOM样式，尝试通过预定义的cssclsss，然后修改DOMclassName。不要将DOM节点的属性值作为循环中的变量放入循环中。对于需要动画的HTML元素，添加position:absolute/fixed属性值，这样修改元素的css就不会造成回流。不要使用表格布局，因为一个小的改动可能会导致整个表格重新布局。盒模型HTML文档中的每个元素在渲染时都会被描述为一个矩形盒，盒模型用于表示每个元素盒所占空间的大小。CSS盒模型分为W3C标准盒模型和IE盒模型，IE盒模型是IE6以下版本怪异模式下的盒模型，IE6及以上版本沿用标准盒模型。在CSS中，主要由四个部分来描述，分别是margin、border、padding、content。一般来说，IE盒模型的宽高计算方法是：width/height=content+padding+border，而W3C标准盒模型的宽高计算方法是：width/height=content。W3C标准盒模型的宽高计算方式会对非px单位的宽高造成非常大的计算麻烦，如下：.box{width:50%;border:1pxsolid#ccc;}这个地方要一定要50%，但是实际尺寸是50%+2px，多出的2px很无奈，所以为了不破坏50%的宽度，经常需要嵌入另一层元素来设置边框，就变成了：.box{width:50%;}.box.box-inner{border:1pxsolid#ccc;}这个方案显然不科学，至少它导致为了臃肿的HTML结构，而box-sizing属性的出现解决了这个问题，用来改变元素宽高的计算方式。box-sizing属性有两个常用值content-box和border-box。如果值为content-box（默认），则实际宽度为上述计算方式：实际宽高=border+padding+width/height。比如border-box是另一种计算方式，它的实际宽高就是设置的宽/高。浏览器选择哪种盒子模型主要看浏览器是标准模式还是怪异模式。标记中有DTD声明。如果有DTD声明，则浏览器处于标准模式。如果没有DTD声明，则浏览器采用怪异模式，怪异模式浏览器按照自己的解析方式进行解析。IE6会选择IE盒子模型，其他现代浏览器会使用W3C标准盒子模型。IE6以下版本的浏览器不遵循W3C标准，无论页面是否有DTD语句，都按照IE盒子模型解析代码。margin属性margin:%|px，如果margin的值为%，则根据父元素的宽度计算，包括margin-top和margin-bottom，其值也是相对于父元素的宽度。并且内联元素的margin-top/bottom是不允许设置的。边距不会在水平方向合并。Margins会在垂直方向合并，其值为两者中的最大值。该元素设置了margin-top、margin-bottom且为空，其margin也会上下重叠。它的值为两者的最大值如果父元素没有padding、border等属性，则子元素的外边距会与父元素的外边距重叠。margin设置负值是正常文档流中的元素，负值相当于将元素移到负值。方向移动叠加，但只会覆盖颜色，不会覆盖文字。对于position:relative元素，负值会完全覆盖前面的元素，影响后面的元素一起移动。对于position:absolute元素，该元素与正常文档流分离，对其他元素没有影响。对于float元素，它可以被负值覆盖。最常见的应用程序是三列布局。如果padding属性的值为%，也是按照父元素的宽度计算的。如果没有合并padding，则padding没有负值。到容器的边框或者另一个浮动元素，浮动元素会根据前一个元素的类型判断位置。如果前一个元素是浮动元素，它将随之浮动。如果无法放置，则将其推到下一行。元素的相对垂直高度保持不变，顶部和之前的底部对齐，清除浮动父元素。添加overflow:hidden会隐藏子元素超出容器的部分，IE6不支持在floating元素后面添加clear:both，会添加额外的无意义标签的父元素使用伪类变成float元素:after，代码如下：.wrap:after{content:'',display:block;高度：0；clear:both;}.wrap{zoom:1;}content是在父容器后面加一个空白字符，height:0是让空白字符不显示，display:block;clear:both是保证空白字符是一个非浮动的独立块。zoom:1是IE6特有的属性。它的作用是激活父元素的hasLayout属性，让父元素有自己的布局，其他浏览器会直接忽略这个属性。BFC原理BFC是块级格式化上下文，属于普通文档流。具有BFC特性的元素可以看作是隔离的独立容器。容器内部的元素在布局时不会影响外部的元素，BFC具有普通容器所没有的一些特性。通俗地说，BFC可以理解为一个封闭的大盒子，盒子里面的元素再大也不会影响到外面。触发BFC的条件只要元素满足以下任一条件，即可触发BFC特性：body根元素浮动元素：非none的浮点值绝对定位元素：position(absolute,fixed)显示为line-block，table-ceils,flexoverflowValuesotherthanvisible(hidden,scroll,auto)BFC特性和应用不同的BFC容器底边距不会重叠BFC可以包含浮动元素（clearfloating）BFC可以防止元素被浮动元素覆盖和可以用来实现两列自适应布局。级联层级一个DOM元素，不管级联上下文如何，都会根据级联层级决定元素在Z轴上的显示顺序。一般来说，当不同的DOM元素组合起来进行级联时，它们的显示顺序会遵循级联层次的规则，而z-index就是用来调整一个元素的显示顺序的。7级级联级别如果两个元素的级联级别相同，此时应遵循以下两条准则：1、后来者原则。在级联上下文中，元素按照级联级别的规则进行堆叠。一般情况下，级联上下文分为三种：1、级联上下文是默认创建的，HTML根元素属于根级联上下文元素。2、需要配合z-index触发级联创建Context3不需要配合z-index触发创建stackingcontext。创建层叠上下文需要z-index1.有position属性的元素2.flex项（父元素diaplay为flex|inline-flex）注意是子元素，不是父元素创建层叠上下文这两种情况都需要设置一个具体的z-index值，不能将z-index设置为auto。这是z-index:auto和z-index:0之间的细微差别。您不需要z-index来创建堆叠上下文。在这种情况下，基本上是由CSS3中的新属性触发的。常见的有：元素的opacity<1元素的以下属性不是没有：transform、filter、mask等。
