CSS 样式层与 渲染引擎 联想

一、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