BrowserBrowserRenderingEngineJavaScriptEngineIETridentJScriptEdgeEdgeHTMLChakraSafariWebkitNitroChromeBlinkV8FireFoxGeckoSpiderMonkeyOperaPrasto->blinkCarakan->V8ShellBrowser360BrowserUCBrowserQQBrowserSogouBrowserWhatisHTMLHTMLHyperTextMarkupLanguageusestagstodescribethecontentandstructureofthepage.Doctype的作用是指定页面的使用标准和版本，来决定使用哪种渲染模式。渲染模式QuirksMode（怪异模式）AlmoststandardMode（标准标准模式）StandardMode（标准模式）注意：如果我们不指定Doctype，IE6和IE7将以怪异模式渲染页面，IE8将以标准渲染页面模式，firefox11也会以标准模式呈现页面。HTML设计思想兼容现有内容，避免不必要的复杂性，解决实际问题，优雅降级，尊重事实标准，改变Doctype和meta，添加语义标签，去除纯粹表达标签WebStorage、canvas、video、audio、draganddrop、和离线语法标签不区分大小写，建议使用小写。空标签可以在没有引号的情况下打开。建议部分属性值可以省略，比如required,readonly图片宽高不指定heightandwidth:原始图片大小显示specifiedwidth:缩放到指定宽度specifiedheight:缩放到指定高度specifiedheightandwidth:mandatory根据指定的高宽显示图片格式jpg:photopng:颜色少时使用，png24可以半透明gif:不半透明，可以多帧动画WebP注：WebP的优点是体现在其更好的图像数据压缩算法，可以带来更小的图像尺寸，并且具有与肉眼相同的图像质量；它还具有无损和有损压缩模式、Alpha透明度和动画功能，对JPEG和PNG的转换效果非常好。安定团结。更多...语义提高代码可读性和可维护性搜索引擎优化（有利于SEO）提高可访问性CSS选择器simpleselectoruniversalselector*tagselectorpidselector#idclassselection.class属性选择器[attr]只使用属性名，但是不决定任何属性值；[attr="value"]指定属性名，指定属性的属性值；[attr~="value"]指定属性名和属性值，这个属性值是一个以空格分隔的单词列表，单词列表包含一个值；[attr^="value"]指定属性名，并有属性值，属性值以value开头；[attr$="value"]指定属性名，并有一个属性值，属性值以value结尾；[attr*="value"]指定属性名，并有一个属性值，属性值是包含值；[attr|="value"]指定属性名，属性值为value或以"value-"开头的值；伪类（pseudo-classes）是根据DOM之外的信息（比如根据用户和网页的交互状态）来选择元素。a:link{...}/*未访问的链接*/a:visited{...}/*已访问的链接*/a:hover{...}/*鼠标悬停在链接样式上*/a:active{...}/*鼠标在连接上按下时的样式*/a:focus{...}/*获得焦点时的样式*/选择器组合直接组合E[foo="bar"]E.warningE#myid#myid.warning.warning[foo="bar"]后代组合/*后代选择器*/articlep{...}/*父子选择器*/article>p{...}Adjacentsiblingsinput[type="check"]+label{...}Genericsiblings.active~li{...}/*Selectallsiblings*/定义样式主体，h1用于一组选择器同时,h2,h3,h4,h5,h6,ul,ol,li{margin:0;padding:0;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}选择器优先级是根据特异性（Specificity）选择器内联来判断的？idnumber（伪）classnumberlabelnumberspecificity#nav.listlia:link01220122.hdul.linksa00220022Where语句有效？查找所有符合该属性的声明根据规则的来源，优先级从低到高：浏览器预设用户在同一个来源设置网页样式，按特殊性排序，越特殊优先级越高,当specificity相同时,按照style的写法顺序,后者的优先级高,而!important根据规则的来源找到所有符合属性的声明时的变化,优先级从低到high:浏览器默认用户设置网页样式为!important网页样式为!同源重要用户自定义样式，按特殊性排序，越特殊优先级越高。当特异性相同时，按照样式书写顺序，以下css文字样式可以继承font-family使用逗号分隔的字体家族名称，初始值由浏览器设置决定，可以继承字体匹配算法。浏览器首先获取系统字体列表。对于元素中的每个字符，使用font-family属性和其他属性进行匹配，如果可以匹配，则暂定字体。如果第2步不匹配，请选择下一个可选字体系列。执行步骤2，如果匹配到一个字体，但是字体中不存在该字符，则继续匹配下一个可选的font-family，在步骤2中执行，如果没有找到字体，则使用浏览器的默认字体font-family。在中文字体前使用英文字体。最后总是加上通用字体族font-size来定义文字的大小，可以用px、百分比、em等作为单位值绝对值xx-small|x-小|小|介质|大|x-大|xx-large相对值较大|medium（由浏览器设置决定，一般为16px），可继承的长度单位em一般是相对于元素font-size的计算值。当用在font-size属性上时，它是相对于父元素font-size的计算值的font-style定义了文本应该以斜体显示还是正常显示。价值：正常|斜体|oblique初始值正常，可以继承。font-weight定义文本的粗细：normal|粗体|更大胆|打火机|100|200|……|900初值正常，可以继承。line-height元素所属的linebox初始值为normal（具体值由浏览器决定），可继承值为：|<数字>|段落文字一般取值为1.4～1.8line-height:26px；表示行高为26像素line-heigth:120%;表示行高是当前字号的120%line-height:2.6em;表示行高是当前字号和单位的2.6倍的行高被继承，其子元素继承计算出的值。例如父元素的字体大小为14px，行高定义为line-height:2em；那么计算出来的值为28px，不会随着子元素改变font-size而改变line-height。（例如：父元素为14px，子元素为12px，则行高为28px，虽然子元素的字体为12，但行高仍为父元素的行高）line-height：2.6;表示行高是当前字号的2.6倍。带单位的行高是直接继承的，不是计算出来的值。例如父元素的字体大小为14px，行高为line-height:2；它的行高是28px；子元素大小为12px，无需重新定义行高。他的默认行高是24px。（例如：子元素为12px，其行高为24，不会继承父元素的28）text-align定义容器中文本的对齐方式Value:left|对|中心|justify初始值由HTMLDecision的dir属性决定，可以继承letter-spacing来指定字符间的间距值：normal|初始值为normal，可继承word-spacing指定字间距值：normal|初始值为normal，可继承text-indent指定文本缩进值：normal|<长度>|初始值为0，可以继承text-decoration来定义文字的一些装饰效果，比如下划线、删除线等。初始值为none，可以继承其他值：underline|直通|overlinewhite-space指定如何处理空白值：normal|现在收起|preword-break指定是否允许单词中间换行取值：normal|打破一切|为百分比时，指的是父元素框的宽度；当height的值为百分比时，指的是父元素框的高度；padding的值为百分比时，指的是父元素的宽度；当margin的值为百分比时，参考父元素的宽度；块级元素（Block-levelElements）会被格式化为p、div、section等块状元素，设置显示为block、list-item、table使元素成为块级内联级元素(Inline-levelElements)不为其内容生成块级框，因此其内容分布在多行中。Display设置为inline、inline-block、inline-table使元素成为line-levelmargin：line-levelboxmargin-top和margin-bottom没有作用padding：line-level的padding-top和padding-topboxes不影响block-levelboxes中子boxes的生成。块级框可以包含多个子块级框。不在行级元素内的多个行级框surface上的文字会生成一个匿名的行级框。例如：

SomeText

块级框不能同时包含块级和行级框。在这种情况下，会生成一个匿名块级框来包含行级框。例如：row-levelboxes中子boxes的生成Row-levelboxes可以包含row-levelboxes当一个块级框被包含时，它会被块级框拆分成两个行级框，这两个框分别被匿名块级框包含。常规流除了根元素、浮动元素和绝对定位元素外，其他元素都在常规流内（in-flow），根元素、浮动和绝对定位元素在常规流中会出箱（outofflow）),属于块级格式化上下文或行级格式化上下文块级格式化上下文（BlockFormattingContext）框在容器（containingblock）内从上到下一个接一个地放置，由两个兄弟框之间的垂直距离决定通过margin属性，同一个BFC中的垂直边距会将框的左外边缘合并到容器（包含块）的左侧块级格式化上下文（BFC）的特点：BFC中的浮动不会affectelementsoutsidetheBFCBFCBFC的高度将包含其内部的浮动元素，并且BFC不会与浮动元素重叠。BFC可以通过overflow:hidden等方法创建。BFC创建：浮动框绝对定位框非块级块容器（inline-block）溢出属性不可见块框BFC的作用：清除浮动，防止边距塌陷。双列布局内联格式化上下文（InlineFormattingContext）框一个一个水平放置。称为行框（Linebox）。当一个linebox放不下context中的所有box时，会被分割成多个垂直堆叠的linebox。行框中的水平分布由'text-align'属性决定。如果一个行级块Unabletosplit(word,inline-block)，元素将作为一个整体来确定在Float中分配到哪个行框，直到它的外边缘靠近容器或另一个浮动框的边缘。浮动元素不会影响其后面的流入块级框，但会缩短浮动元素后面的行级框，以避开浮动元素。positionstatic，非定位，默认值relative，相对定位（相对于自己）absolute，绝对定位，相对于非静态祖先元素定位fixed，相对于视口绝对定位relative在常规流程中，布局相对于它应该使用的位置偏移top,left,bottom,right设置流中其他元素的偏移长度。当它没有偏移时，布局是绝对的。它偏离了正常的流程。最近的非静态祖先的填充框定位不会影响流中元素的布局。可以有边距，但不会折叠。修复了视口上的相对定位不会随页面滚动而改变的问题。z-index堆叠层级指定了定位元素在z轴上的上下层级。它由一个整数表示。值越大，离用户越近。初始值为auto，可以为负数，0，正数注意：z-index越大不一定在最上面，要考虑级联上下文。生成级联上下文。Root元素的z-index值不是自动的。transform、animation等的绘制顺序在每一个stackingcontext中，从下到上：构成context的元素的border和backgroundz-index为negativesub-stackingcontextsblock-levelelementsinthenormalflowarenon-floatingandnon-positioning一个非定位行级元素的子元素，在一个浮动元素的正常流中，z-index为0或者子堆叠上下文的z-index为正