«

»

浏览器中元素的定位类型

浏览器 定位网页中元素的定位用由position属性确定,分为绝对定位,相对定位。除此之外还有浮动定位。position的取值有staic,absolute,fixed,relative等几种,但static是默认值,而fixed值尚未支持。CSS的float属性用于指定网页元素浮动的方向,任何元素都可以浮动,而且浮动元素会生成一个block型的盒子。以下是几种定位的图例:

相对

相对定位—正常的定位然后按要求的增量移动。

浏览器中元素的定位类型

图18:相对定位

浮动

一个浮动盒子会偏移到一行的左边或右边。有趣的特点是其它盒子会围绕着它。下面的HTML:

看起来象这样:

浏览器中元素的定位类型

图19:浮动

绝对和固定

不管普通布局,准确的定位布放位置。元素不参予普通流程。座标是相对于容器的。在固定定位时—容器是视口。

浏览器中元素的定位类型

图20:固定定位

注意—固定框体就算文档滚动了也不会改变位置。

分层展现

在z-index这个CSS属性里指定。它代表盒子的第三个座标,它是沿Z轴定位的。

盒子被分拆到栈里(称为栈内容)。在每个栈里后面的元素会首先被绘制,前面的元素在顶部,离用户最近。在有重叠的情况下会挡住先前的元素。

这个栈依据z-order属性来排序。有“z-index”属性的盒子组成了一个本地栈。视口有一个外栈。

例如:

结果会是这样:

浏览器中元素的定位类型

图20:固定定位

尽管红色div比绿的更靠前,在正常流程中更早绘制,但它的z-order属性值更高一些,所以它在根盒的栈中更靠上一些。

原文地址:http://taligarsiel.com/Projects/howbrowserswork1.htm

作者引用资源:

1. Browser architecture

1. Grosskurth, Alan. A Reference Architecture for Web Browsers. http://grosskurth.ca/papers/browser-refarch.pdf.

2. Parsing

1. Aho, Sethi, Ullman, Compilers: Principles, Techniques, and Tools (aka the “Dragon book”), Addison-Wesley, 1986

2. Rick Jelliffe. The Bold and the Beautiful: two new drafts for HTML 5. http://broadcast.oreilly.com/2009/05/the-bold-and-the-beautiful-two.html.

3. Firefox

1. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers. http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-6.xhtml.

2. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers(Google tech talk video). http://www.youtube.com/watch?v=a2_6bGNZ7bA.

3. L. David Baron, Mozilla’s Layout Engine. http://www.mozilla.org/newlayout/doc/layout-2006-07-12/slide-6.xhtml.

4. L. David Baron, Mozilla Style System Documentation. http://www.mozilla.org/newlayout/doc/style-system.html.

5. Chris Waterson, Notes on HTML Reflow. http://www.mozilla.org/newlayout/doc/reflow.html.

6. Chris Waterson, Gecko Overview. http://www.mozilla.org/newlayout/doc/gecko-overview.htm.

7. Alexander Larsson, The life of an HTML HTTP request. https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request.

4. Webkit

1. David Hyatt, Implementing CSS(part 1). http://weblogs.mozillazine.org/hyatt/archives/cat_safari.html.

2. David Hyatt, An Overview of WebCore. http://weblogs.mozillazine.org/hyatt/WebCore/chapter2.html.

3. David Hyatt, WebCore Rendering. http://webkit.org/blog/114/.

4. David Hyatt, The FOUC Problem. http://webkit.org/blog/66/the-fouc-problem/.

5. W3C Specifications

1. HTML 4.01 Specification. http://www.w3.org/TR/html4/.

2. HTML5 Specification. http://dev.w3.org/html5/spec/Overview.html.

3. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. http://www.w3.org/TR/CSS2/.

6. Browsers build instructions

1. Firefox. https://developer.mozilla.org/en/Build_Documentation

2. Webkit. http://webkit.org/building/build.html

(全文完)

1 星2 星3 星4 星5 星 (尚无评分)
Loading...Loading...

相关文章

浏览器中CSS的盒模型 首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”---也就是浏览器...
浏览器的绘制阶段 在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础...
浏览器的布局 下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布...
浏览器样式表的规则匹配和级联顺序 浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个...
浏览器中使用规则树来计算样式 当计算某个元素的样式内容时,我们首先计算规则树里的一条路径或是使用一条已经存在的路径。接下来就开...
浏览器的样式计算 建立渲染树时需要计算每个渲染对象的可视化属性。这是通过计算每个元素的样式属性来实现的。样式包含HTM...
浏览器中渲染树的构造 当DOM树被构造的同时,浏览器构造了另外一棵树,渲染树。这是棵按其显示顺序排列的可视化元素构成的树。...
浏览器处理脚本和样式表的顺序 因特网的模式是同步的,开发者希望解析器在遇到一个