10
2013
06

浏览器工作原理 - CSS2可视模型(CSS2 visual module)

画布The Canvas

  根据CSS2规范,术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的,但浏览器基于viewport的大小选择了一个初始宽度。

  根据http://www.w3.org/TR/CSS2/zindex.html  的定义,画布如果是包含在其他画布内则是透明的,否则浏览器会指定一个颜色。

  

CSS盒模型

  CSS盒模型描述了矩形盒,这些矩形盒是为文档树中的元素生成的,并根据可视的格式化模型进行布局。每个box包括内容区域(如图片、文本等)及可选的四周padding、border和margin区域。

image

  每个节点生成0-n个这样的box。

  所有的元素都有一个display属性,用来决定它们生成box的类型,例如:

  block -生成块状box

  inline -生成一个或多个行内box

  none -不生成box

  默认的是inline,但浏览器样式表设置了其他默认值,例如,div元素默认为block。可以访问http://www.w3.org/TR/CSS2/sample.html  查看更多的默认样式表示例。

  

定位策略Position scheme

  这里有三种策略:

  1. normal -对象根据它在文档的中位置定位,这意味着它在渲染树和在Dom树中位置一致,并根据它的盒模型和大小进行布局。

  2. float -对象先像普通流一样布局,然后尽可能的向左或是向右移动。

  3. absolute -对象在渲染树中的位置和Dom树中位置无关。

  static和relative是normal,absolute和fixed属于absolute。

  在static定位中,不定义位置而使用默认的位置。其他策略中,作者指定位置——top、bottom、left、right。

  Box布局的方式由这几项决定:box的类型、box的大小、定位策略及扩展信息(比如图片大小和屏幕尺寸)。

  

Box类型

  Block box:构成一个块,即在浏览器窗口上有自己的矩形

1.png

  Inline box:并没有自己的块状区域,但包含在一个块状区域内

2.png

  block一个挨着一个垂直格式化,inline则在水平方向上格式化。

3.png

  Inline盒模型放置在行内或是line box中,每行至少和最高的box一样高,当box以baseline对齐时——即一个元素的底部和另一个box上除底部以外的某点对齐,行高可以比最高的box高。当容器宽度不够时,行内元素将被放到多行中,这在一个p元素中经常发生。

4.png

定位Position  

       Relative

  相对定位——先按照一般的定位,然后按所要求的差值移动。

image

  Floats

  一个浮动的box移动到一行的最左边或是最右边,其余的box围绕在它周围。下面这段html:

<p>
<img src="images/image.gif" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>

  将显示为:

image

  Absolute和Fixed

  这种情况下的布局完全不顾普通的文档流,元素不属于文档流的一部分,大小取决于容器。Fixed时,容器为viewport(可视区域)。

image

fixed

  注意-fixed即使在文档流滚动时也不会移动。

 

Layered representation

  这个由CSS属性中的z-index指定,表示盒模型的第三个大小,即在z轴上的位置。Box分发到堆栈中(称为堆栈上下文),每个堆栈中靠后的元素将被较早绘制,栈顶靠前的元素离用户最近,当发生交叠时,将隐藏靠后的元素。堆栈根据z-index属性排序,拥有z-index属性的box形成了一个局部堆栈,viewport有外部堆栈,例如:

<STYLE type="text/css">
div {
position: absolute;
left: 2in;
top: 2in;
}
</STYLE>
<P>
<DIV
>
</DIV>
<DIV
>
</DIV>
</p>

  结果是:

image

  虽然绿色div排在红色div后面,可能在正常流中也已经被绘制在后面,但z-index有更高优先级,所以在根box的堆栈中更靠前。


« 上一篇下一篇 »

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。