手机WEBKIT引擎HTML元素定位和事例.docVIP

手机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，观察它的效果。 body?style=background:#FFFFFF? diva/divdivb/divdivc/divdivd/divdive/divdivf/div? /body? 可以看到每一个div占用了手机屏幕的一整行。BODY被六个div元素撑高。 我们看到div元素内容实际并不需要占用一行，如果希望多个元素根据宽度自动横排适配，可以进行如下调整。 body?style=background:#FFFFFF? div?style=display:inline-blocka/div? div?style=display:inline-blockb/div? divc/divdivd/divdive/divdivf/div? /body? 当为a和b的div指定了inline-block属性后，这两个div元素不再占用一整行，他根据内容自动撑开为8x18的矩形，并在一行内显示。我们扩充b-div元素的内容，使其变长 body?style=background:#FFFFFF? div?style=display:inline-blocka/div? div?style=display:inline-blockbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb/div? divc/divdivd/divdive/divdivf/div? /body? 如上图所示，b-div自动在第二行显示，因此可以看到inline-block属性是串行安排元素，如果不超过一行，则在一行内显示，超过一行，则进行换行。 我们再调整一下代码，把inline-block改为inline body?style=background:#FFFFFF? div?style=display:inlinea/div? div?style=display:inlinebbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb/div? divc/divdivd/divdive/divdivf/div? /body? 看到a b在一行显示，inline和inline-block的区别就是，inline强制元素在一行，而inline-block则是不超过一行在一行内显示，否则换行。 如上是我们常用的div 显示控制。参考w3cSchool整理的display属性表格如下 上面我们讲解了div元素在默认浏览器流式布局的情况下,body中元素布局的情况，而实际上，每一个div元素内部也可以包含其它元素，而这些子元素也是一样按照流方式进行布局。请参看如下代码和效果图。 body?style=background:#FFFFFF? div?style=display:inlinea/div? div?style=display:inline? ????div?style=display:inlineA/div? ????div?style=display:inlineB/div? ????divC/div? /div? divc/divdivd/divdive/divdivf/div? /body? 从上述事例图中可以看到，包含在div中的子div也遵循之前的流式方式进行排版，并且由于父DIV是由子d