您所在的位置:移动开发 > 热点推荐 > 手机WEBKIT引擎HTML元素定位和事例(1)

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

2012-03-13 17:18 AppCan.cn 51CTO 字号: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,观察它的效果。

  1. <body style="background:#FFFFFF"> 
  2. <div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div> 
  3. </body> 

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

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

  1. <body style="background:#FFFFFF"> 
  2. <div style="display:inline-block">a</div> 
  3. <div style="display:inline-block">b</div> 
  4. <div>c</div><div>d</div><div>e</div><div>f</div> 
  5. </body> 

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

  1. <body style="background:#FFFFFF"> 
  2. <div style="display:inline-block">a</div> 
  3. <div style="display:inline-block">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 
  4. <div>c</div><div>d</div><div>e</div><div>f</div> 
  5. </body> 

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

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

  1. <body style="background:#FFFFFF"> 
  2. <div style="display:inline">a</div> 
  3. <div style="display:inline">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 
  4. <div>c</div><div>d</div><div>e</div><div>f</div> 
  5. </body> 

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

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

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

  1. <body style="background:#FFFFFF"> 
  2. <div style="display:inline">a</div> 
  3. <div style="display:inline"> 
  4.     <div style="display:inline">A</div> 
  5.     <div style="display:inline">B</div> 
  6.     <div>C</div> 
  7. </div> 
  8. <div>c</div><div>d</div><div>e</div><div>f</div> 
  9. </body> 

从上述事例图中可以看到,包含在div中的子div也遵循之前的流式方式进行排版,并且由于父DIV是由子div支撑起来的,因此子div的布局也会影响到父div在父流中的布局。

但很多情况下,总会有一些捣乱分子存在,他们不希望按照固定的流来安置自己而是更希望自己能够有个性一点。他们使用float和position属性来实现这个目的。float常用的属性如下

loat这个CSS属性比较难于控制,使用的好,那么你可以把布局做的很眩,使用的不好,界面会乱的一塌糊涂。如下是摘录的float的用法分析,它已经对float进行了完美的说明。

内容导航
 第 1 页:手机WEBKIT引擎HTML元素定位和事例  第 2 页:CSS浮动属性Float详解
 第 3 页:伟大的塌陷  第 4 页:浮动的问题
 第 5 页:fixed属性



分享到:

热点职位

更多>>

热点专题

更多>>

读书

网络管理员考试全真模拟试题与解析
本书是按照全国计算机技术与软件专业技术资格(水平)考试《网络管理员考试大纲》的要求,参照《网络管理员教程》及近年来考试试

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i 51CTO学院