思洋互动网站建设学前班

fixed属性

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

这个属性可以控制元素在硬件屏幕上的指定位置显示，它不再从属于流，也不再使元素从属于其父元素属性进行定位，而是直接根据硬件屏幕进行定位。这个属性主要用于超出浏览器窗口的网页时，保持某些元素永远浮动于屏幕的制定位置。我们举一个事例来看他的效果。

1. <div>111</div> 
2.     <div>222</div> 
3.     <div>333</div> 
4.     <div>444</div> 
5.     <div>555</div> 
6.     <div>111</div> 
7.     <div>222</div> 
8.     <div>333</div> 
9. ... ... ... ... ... ... 
10.     <div>444</div> 
11.     <div>555</div> 
12.     <div style="position:fixed;left:50px;top:90px">I am fixed</div> 

我们建立多个div条目使其超出屏幕容纳范围，然后加入一个fixed的元素，并指定其位置。然后滚动屏幕，可以看到不论网页怎么滚动，fixed元素始终在屏幕指定的物理位置。从上面看出，fixed属性在界面设计中是非常关键的功能，但遗憾的是在android2.2以下和iOS5.0以下平台都不支持这个属性。在AppCan平台，我们提供了几种机制来实现相关的类似功能。具体可以参考我们相关的网站。

通过上面的讲述，我们已经知道了比较常见的几种用于布局的属性，来实现元素的定位。但这些属性还不能够完成我们对界面的布局要求，还要与其他相关定位属性进行结合。下面我们就对这些属性进行分析。

之前的事例中我们发现，div元素本身的大小，完全根据其子元素的高宽来支撑的，但实际情况是我们希望为d iv元素本身设定一个大小高宽位置，然后在其中排布子元素。下面是几种方案

在流中的div元素会完全忽略top, bottom, left, right,width,height这些属性，因此无法为流中的div元素指定大小位置等信息。在这种情况下如果需要调整div的高宽值，我们可以使用padding属性、min-height、max-height、min-width、max-width来处理。我们一一进行介绍

padding 属性是用来指定一个元素的内边距。一个元素的宽度可以认为是"

宽度=左边框宽度+左侧内边距+内容宽度+右侧内边距+右边框宽度"，就如下图所示。下图中的margin属性是元素与其他元素间的间隔也就是外边距。

padding属性的衍生属性有padding-top padding-bottom padding-right padding-left，分别制定四个边距。

那么我们如何使用padding 来调整div的高宽呢，很简单直接为Padding指定数值即可。从上面的公式可以看出，如果希望宽度固定，再指定了边框宽度和边距宽度后，内容宽度也就必须是定值。因此，使用padding来调整高宽时，常用在固定高宽的场景中。下面举一个事例。

1. <div style="position:relative;padding:80px;border:1px solid #000">111 
2. <img style="position:absolute;left:0px;top:5px;"  
3.     width="70px" height="30px"  src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"> 
4. </img> 
5. </div> 

上面事例中我们看到，我们设定了padding属性为80px,也就是说111元素外围四个边内边距都为80px，这时我们为img子元素指定了绝对定位left:0px top:5px。介绍一个定位的小技巧，上面的google图片我们希望他居于左侧并且纵向居中，该如何做呢?

1. <div style="position:relative;padding:80px;border:1px solid #000">111 
2. <img style="position:absolute;left:0px;top:50%;margin-top:-15px"    width="70px" height="30px"  src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"> 
3. </img> 
4. </div> 

上面的代码中，我们为图片指定了top位置为其父元素的50%位置(父元素Position要设定为非static)，但这指定了图片的左上角位置在50%，图片还是不居中，这时我们为图片指定了上外边距为-15px，也就是图片高度的一半，图片会再上移15点，达到居中的效果。其实公式很简单 positionY=divHeight*50%-imgHeight*50%

下面是一个padding复杂应用效果的范例截图

上面我们使用padding来控制元素的高宽，但在元素包含内容会出现变化的情况下，想固定高宽，padding已经不能够胜任。这时我们会用到min-width、max-width、min-height和max-height属性。我们看下面的min-height事例，来了解其使用效果。

1. <div style="position:relative;padding-left:80px;border:1px solid #000;min-height:100px"> 
2.     111<br>222<br> 
3.     <img style="position:absolute;left:0px;top:50%;margin-top:-15px"              width="70px" height="30px"                                                                  
4.             src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"> 
5.     </img> 
6. </div> 

上述的范例中，我们为div制定了左侧内边距80px用于容纳图片，高度指定了最小高度100px，这时我们可以看到，即使内容高度发生了变化，div高度还是100px。但这个范例里只加入了111 222两个内容部分，如果内容部分高度超过了100px，会出现什么情况呢?

div被撑开，如何避免这种问题呢?看如下代码

1. <div style="position:relative;padding-left:80px;border:1px solid #000;min-height:100px; max-height:100px;overflow:hidden> 
2.     111<br>222<br> 
3.     <img style="position:absolute;left:0px;top:50%;margin-top:-15px"              width="70px" height="30px"                
4.    src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"> 
5.     </img> 
6. </div> 

与之前代码相比，我们为div指定了max-height属性，来控制其最大高度，避免内容超出区域时撑大div,同时指定了overflow属性，避免显示到div外侧(overflow属性在不同的手机平台上和平台的不同版本中，支持度也是不同的，auto和scroll属性基本都不会被支持。因此，如果希望在div内部实现滚动效果，目前浏览器原始功能还是不能够实现的)

上边的事例中我们都使用的是px作为长度高度单位，但是在手机应用研发中，面对的手机硬件屏幕尺寸、分辨率等类别非常多，如果使用px作为度量单位，会造成在低分辨率手机显示正常的元素，在高分辨率上显示的非常小而无法让用户操作，或者在高分辨率手机的屏幕上显示正常，但在低分辨率屏幕上又过大无法完全展示。对于这种情况，我们推荐，在手机应用研发中，网页内部的度量单位都使用em。什么是em呢?假如当前网页的默认字体是12px，那么0.5em就是6px，如果字体是32px那么0.5em就是16px。em是当前字体大小相对单位。这样，我们只需要为页面在不同分辨率的手机指定不同的字体大小，而页面内部元素都指定em为单位，即可做到在不同分辨率上保持相近的效果。那如何来为每个页面指定字体呢，我们使用media query属性。下面代码摘录于AppCan UI框架包

1. @media all and (min-width:340px) and (min-height:620px),(min-width:620px) and (min-height:340px) 
2. { 
3.     html 
4.     { 
5.         font-size:20px; 
6.     } 
7.     .ui-block-auto 
8.     { 
9.         width:33.333% 
10.     } 
11. } 
12.  
13. @media all and (min-width:420px) and (min-height:760px) and (max-height:900px), 
14.                (min-width:760px) and (max-width:900px) and (min-height:420px) 
15. { 
16.     html 
17.     { 
18.         font-size:24px; 
19.     } 
20.     .ui-block-auto 
21.     { 
22.         width:33.333% 
23.     } 
24. } 
25.  
26. @media all and (min-width:1000px) and (min-height:740px),(min-width:740px) and (min-height:1000px) 
27. { 
28.     html 
29.     { 
30.         font-size:20px; 
31.     } 
32.     .ui-block-auto 
33.     { 
34.         width:20% 
35.     } 
36. } 

从上述代码中，我们可以看到如何为不同分辨率的屏幕指定字体的。但这又衍生出了另一个问题，当手机进行横竖屏进行切换时，手机认为分辨率发生了变化，这时会造成上述media适配出现适配到其他分辨率的情况，有可能手机竖屏时布局正常变成横屏时，真个布局发生了放大或缩小，字体也出现了变化。如何解决这种问题呢?有几种方法
广州网站建设,网站建设,广州网页设计,广州网站设计

1.如果软件只需要在竖屏使用，AppCan平台为应用提供了配置选项，只需要在调整一下配置即可使应用不再转屏。

2.如果应用需要转屏支持，可以在网页中加入下述代码

1. document.body.style.fontSize=window.getComputedStyle(document.body,null).fontSize; 

上述代码的作用是为body的style指定字体，而字体是由浏览器计算得来的。由于style属性优先级高于CSS类，因此，可以使手机旋转时的适配无效，保证手机界面不管横竖屏始终保持一种字体。

3.如果应用需要支持旋转屏，并且确认软件只运行于指定的手机分辨率上，可以调整media query，使其对横竖屏情况进行分别适配。

到此，我们已经基本介绍了在手机HTML应用研发中，如何通过css属性对手机的元素进行定位的。希望能对大家使用HTML进行手机应用研发有所帮助，谢谢。

AppCan移动应用开发平台的开发环境和指导帮助可以参考我们的网站 www.appcan.cn 

作者：AppCan.cn

*为尊重作者劳动成果，转载请注明出处*
广州网站建设,网站建设,广州网页设计,广州网站设计