html兼容webki,手机WEBKI引擎HTML元素定位和事例.doc

手机WEBKI引擎HTML元素定位和事例

手机WEBKIT引擎HTML元素定位和事例(1)

2012-03-13 17:18 AppC 51CTO 我要评论(0) 字号：T | T

一个网页是由众多HTML元素在一定的规则下进行组织排版的产物。因此使用HTML进行应用开发，完成满足用户需求的应用，需要对引擎的排版机制进行一定的了解，这样才能够如指臂使得灵活操纵各个元素，使网页能以需要的效果进行呈现。

AD：

一个网页是由众多HTML元素在一定的规则下进行组织排版的产物。因此使用HTML进行应用开发，完成满足用户需求的应用，需要对引擎的排版机制进行一定的了解，这样才能够如指臂使得灵活操纵各个元素，使网页能以需要的效果进行呈现。

为了简化排版逻辑，我们在下面的介绍中统一使用div作为排版控制标签，一起研究如何控制div完成页面的布局。

DIV标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具。(W3CSCHOOL)

在AppCan应用开发平台中，默认的UI框架就是依赖于div的各种布局组合，来实现界面的定制。

HTML引擎排版时，可以认为所有网页元素都是包含在body中按照流方式进行排布的，如下图顺序所示。

所有元素都忽略 top, bottom, left, right 或者 z-index 声明。DIV元素作为块元素，默认是自动的开始新一行，所以多个div进行布局时，每一个DIV都占用独立一行。

如下事例代码，我们建立了多个div，观察它的效果。

a

b

c

d

e

f

?

?

可以看到每一个div占用了手机屏幕的一整行。BODY被六个div元素撑高。

我们看到div元素内容实际并不需要占用一行，如果希望多个元素根据宽度自动横排适配，可以进行如下调整。

a

?

b

?

c

d

e

f

?

?

当为a和b的div指定了inline-block属性后，这两个div元素不再占用一整行，他根据内容自动撑开为8x18的矩形，并在一行内显示。我们扩充b-div元素的内容，使其变长

a

?

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

?

c

d

e

f

?

?

如上图所示，b-div自动在第二行显示，因此可以看到inline-block属性是串行安排元素，如果不超过一行，则在一行内显示，超过一行，则进行换行。

我们再调整一下代码，把inline-block改为inline

a

?

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

?

c

d

e

f

?

?

看到a b在一行显示，inline和inline-block的区别就是，inline强制元素在一行，而inline-block则是不超过一行在一行内显示，否则换行。

如上是我们常用的div 显示控制。参考w3cSchool整理的display属性表格如下

上面我们讲解了div元素在默认浏览器流式布局的情况下,body中元素布局的情况，而实际上，每一个div元素内部也可以包含其它元素，而这些子元素也是一样按照流方式进行布局。请参看如下代码和效果图。

a

?

?

????

A