一、CSS 样式层联想
1、IE低版本的非著名兼容问题
1、并非不支持Display: inline-block;
CSS2.1版本中对于inline-block的样式定位为：使元素生成一个行内级别的包含块，其内部按块级可以设置宽高，自身按行内框来计算布局。
IE 5.5、6、7 、8（Q）几个低版本IE浏览器中支持inline-block，与CSS2.1版本的规范效果有所差异，准确的说是支持的并不完整。
低版本IE中 inline 元素被设置为 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等触发hasLayout属性均可。
block 元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用 zoom:1 等触发hasLayout属性。
于是便有了兼容性的代码：
Display: inline-block;
*display: inline;
*zoom: 1;
2、position定位中的z-index问题
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。
解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。
2、清晰的html，js， css分层
常将网页分为结构层，表现层，和行为层，将html、js、css分开管理。不仔细想，三者的界限是有一些模糊的。
在浏览器渲染页面的过程中，html可以生成DOM树，js可以被引擎执行，css也可以生成CSSOM（css object model）树。DOM 和 CSSOM 结合生成渲染树。
“块级元素有div、ul、p等，内联元素有a、span、input等”，这些元素的盒模型都是CSS样式范围定义的，来自于浏览器的默认样式设定。
3、盒模型的种类
<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>
这段HTML代码涉及到4种boxes：
1、首先是p标签所在的containing box，此box包含了其他的boxes；（块级盒）
2、然后就是inline boxes，如下图标注，（行内框）
inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a等)，就属inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。
3、line boxes，见下图的标注：
在containing boxes里，每行一个一个的inline boxes组成了line boxes。（行框）
4、content area，见下图标注：
content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。
content
area 围绕着文字的一种box，高度由font-size和font-family决定。在chrome控制器里，你用鼠标志向某个内联元素，显示的高度值。
4、Inline盒模型的高度得来
line box模型，对应样式为”line-height”。（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。
inline box的高度由line-height决定，一半的line-height在content area的上面，另一半在下面。line-height从content area的水平中垂线开始计算。
5、Vertical-align属性的应用
垂直对齐的几个值：top，middle，baseline，bottom。
6、IE浏览器Haslayout属性
layout是IE/WIN里面的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何和其他元素进行相互作用和联系、如何响应和传递应用程序事件、用户事件等；
7、浏览器的BFC模型
相对于IE的hasLayout，W3C规范中有一个BFC概念。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
二、Webkit渲染引擎
1、页面样式css的来源
1、 网页开发者编写的 2、读者设置的样式 3、浏览器的内置默认样式。使用的优先级递减。
在开发过程中可能存在大量不必要，多余的css reset代码，是可以被省去的。
2、页面渲染中的包含块模型
当webkit计算元素的盒子的位置和大小时，它需要计算该元素和另一个矩形区域的相对位置，这个矩形区域被称为元素的包含块。
--根元素的包含块称为初始包含块，大小就是可视区域（viewport）
--position属性为static或者relative的元素，它们的包含块就是最近祖先的盒模型的内容区域。
--position属性为fixed，那么该元素的包含块脱离HTML文档，固定在可视区域的特定位置。
--position 属性为absolute，由最近的含有属性为absolute、relative、或者fiexd的祖先决定。
3、移动端的三个视口viewport
移动端可以分为视觉视口，布局视口和理想视口。通过meta便签，媒体查询，js接口可以获取或设置。是响应式涉及到基础。
4、布局计算中的定位方案
由position和float属性设置，有三种定位方案：
1、static、relative普通：根据对象在文档中的位置进行定位，也就是说对象在呈现树中的位置和它在 DOM 树中的位置相似，并根据其框类型和尺寸进行布局，其他框会浮动在它的周围。
2、float浮动：对象先按照普通流进行布局，然后尽可能地向左或向右移动。
3、absolute、fixed绝对：脱离文档流对象在呈现树中的位置和它在 DOM 树中的位置不同。元素不参与普通流。尺寸是相对于容器而言的。在固定定位中，容器就是可视区域。
float: left、right、none、inherit
position：absolute、 fixed、 relative、 static、 inherit
5、CSS选择器的解析
选择器解析一般从右向左进行，太长的样式嵌套，会损失性能。
原文地址：https://www.cnblogs.com/banyue/p/8687496.html