一、内联元素和行元素的区别1、内联元素就是行内元素。2.内联元素在文档流中被挤成一行；width和height不能设置（即即使设置了也不起作用，比如tag），margin和padding的top和bottom块元素单独占一行；可以设置宽高，margin，padding3，可以使用display属性修改：display:block|inline-block|inline4，inline-block水平排列；withwidthandheight,marginandpadding1)replaceableelements-anaturalinlineblockimginputbuttonselecttextarearlabel2)inlineblock不同于inlineelement，可以设置宽高。3)包装使元素inline-block成为inline-block。在添加宽度和高度之前，内联块将内容紧紧包裹起来。添加宽高后，块默认宽度为100%，设置absolute，成为包裹内容2，position属性1，static不定位，元素出现在正常文档流中，默认属性。left、right、top、bottom、z-index属性的设置不起作用。2.relative是相对于元素本身的正常位置定位。元素的LRTBZ属性设置适用于正常的文档流。3.fixed固定定位，相对定位在浏览器窗口上，即浏览器的滚动不会影响元素的位置，与文档流无关，所以不占用空间并且可能与其他元素重叠。LRTBZ属性设置有效。4.Absolute绝对定位，相对于静态定位以外的第一个父元素的定位，元素脱离文档流。注意：body也是父元素3，display:none；和可见性：隐藏；connection:可以让元素不可见区别：display:none;visibility:hidden;元素从渲染树中消失，渲染时不占用空间从渲染书上消失，渲染时仍然占用空间，但内容是不可见的，非继承属性。后代节点的消失是由于元素从渲染树中消失造成的。修改后代节点的属性仍然无法显示继承的属性，后代节点消失。由于hidden是继承的，设置visibility:visible;可以使后代节点显示。修改常规流中元素的显示，会引起文档的重排（reflow）。修改visibility属性只会导致元素重绘。屏幕阅读器不会阅读显示：无；元素内容；会读注意：屏幕阅读器是浏览器渲染4.回流（reflow）和重绘只要某个变化影响了其他元素，就会发生回流。Reflow：修改元素的布局样式，如width、height、top、margin等，会影响整个页面的布局，浏览器会重新执行布局过程，性能开销较大。（大小、位置、隐藏状态等布局样式）重绘：修改一个元素的非布局样式，如颜色、背景等，不影响整个页面的布局，浏览器会只重绘元素，开销相对较小。注意：回流一定会引起重绘，但重绘不一定会引起回流。性能优化使用visibility:hidden;而不是显示：无；隐藏元素如果需要经常修改DOM样式，可以尝试使用预定义的CSSclass修改DOMclassName。在需要动画的HTML元素中添加position:absolute|fixed；属性值，这样在修改元素的CSS时，不会造成回流（动画最好用CSS3动画，只会造成两次重绘）-分析：这是因为绝对定位和固定定位可以使文档流中的元素。不要使用表格布局。因为一个小小的改动就可能导致整个表格重新布局。——分析：冗余table>div>flextable元素的作用是展示表格数据，而不是作为布局工具。一般使用div+css来实现布局。为什么不使用表格布局？1.table比其他html标签占用字节多，造成下载延迟，占用服务器更多流量资源。2、阻塞浏览器渲染引擎的渲染顺序，会延缓页面生成速度，让用户等待的时间更长。如何最大程度地减少重绘和回流？答：1）对元素进行复杂操作时，可以使用display:none；先隐藏，操作完成后再显示。2）尽量避免使用表格布局3）避免使用CSS表达式，因为每次调用都会重新计算值4）当需要创建多个DOM节点时，创建后使用DocumentFragment添加一次文档。例如varfrag=document.createDocumentFragment()//DocumentFragmentNode//通过appendChild向frag添加element，一次向document添加frag。五、浏览器渲染流程1.解析HTML标签，构建DOM树2.解析CSS文件，构建CSSRuleTree3，根据DOM树和CSS规则书构建渲染树。DOMTree中的一些节点不会被放入RenderTree。例如，header和display都没有的节点。4.渲染树构建完成后，浏览器就已经知道页面中有哪些节点以及对应的样式和从属关系。在布局过程中计算出每个节点在页面中的位置，最后绘制到页面上。图片来源6.盒子模型盒子模型可以通过box-sizing:border-box|content-box;来设置。HTML文档中的每个元素都呈现并描述为一个矩形框。盒模型表示每个元素盒所占空间大小的模型。分类：W3C标准盒模型（IE6及以上）content-box：width=contentIE怪异盒模型（IE6以下）border-box：width=content+padding——不能使用padding开框七、CSS解析规则1、先遍历嵌入样式，再遍历表头样式，最后遍历外链样式（外链样式放在表头样式之后，对于同一个元素，外链样式会覆盖表头样式）2.CSSpriority(!important>embeddedstyle>headstyle)3.同优先级文件中，ID>类，属性选择器，伪类>div，伪元素4.同优先级下，后一个样式覆盖前一个样式(1)selectorType4baseselector,5compoundselector选择器是一种模式，用于选择需要设置样式的元素。(1)4种基本选择器类选择器；ID选择器；通配符选择器(*)；元素选择器（二）5种复合选择器交集选择器：label+class/id选择器{attribute:value;}联合选择器：例如：h1,h2,p（也称为选择器分组）后代选择器：选择器+空格+选择器（两个选择器必须满足嵌套关系，父元素在前，子元素在后,无限代际）子选择器：selector>selector（选择直接下一代元素，也叫子选择器，子元素选择器）相邻兄弟选择器：例如：h1+p（两者都有相同的父元素）补充：属性选择器：ahref{color:red;}CSS伪类：给一些选择器添加特殊效果。例如a:link|visited|hover|active;:focus（有键盘输入焦点，不能在IE中工作）;:first-child（元素的第一个子元素）;:lang（指定lang属性）CSS伪元素：对某些选择器应用特殊效果。例如，p:first-line|first-letter;h1:before|after。在CSS3中变成了::，增加了::selection(2)CSS权重用于计算优先级，优先级计算忽略DOM树中的距离Inlinestyle1000ID选择器100类=伪类=属性选择器10元素选择器=伪-elementSelector18.CSSLayout详见浅谈CSS布局9.CSSHackCSSHack简单来说，CSSHack就是针对不同的浏览器或者同一浏览器的不同版本编写特定的CSS样式，以获得统一的页面效果。CSSHack包括：属性HackIE6可以识别下划线“_”和星号“*”IE7可以识别星号“*”，但不能识别下划线“_”选择器HackIE6可以识别*html.class{}IE7可以识别*+html.class
