Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2013-10-25  |   作者：广州网站建设  |   已聚集：人围观

浮动的问题

浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了，你也可以不关注它了。不过对于那些要关注的人来说，这里有些大概。

◆ 推倒是浮动元素内的元素(大多是图片)比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片，但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片，精彩大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。
广州网站建设,网站建设,广州网页设计,广州网站设计

◆ 快速修正：确保不是图片造成这种情况，使用 overflow:hidden 来切除多余的部分。

◆ 双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。

◆ 3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。快速修正：在受影响的文本上设置宽度或高度。

◆ IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

接着我们继续说明其他用于定位的元素

position常用的属性如下(static为默认属性)
广州网站建设,网站建设,广州网页设计,广州网站设计

其中absolute和fixed都会使元素不再遵循流的布局方式。而relative还会使元素继续遵循流的方式，只是使其定位于相对于其在流中的位置的相对位置上。我们先看一下relative的效果。



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




	



	上述代码中，我们指定了A元素在其流中位置向右30px，这个变化并不会影响到B元素在流中的布局。



	好后面我们关键介绍absolute和fixed属性。



	absolute属性



	我们用一段代码和截图来直观的体验一下




    
	
  1. 
		<div>a</div> 
    2. 
	
  2. 
		    <div style="position:absolute;left:50px">b</div> 
    3. 
	
  3. 
		    <div>c</div> 
    4. 
	
  4. 
		    <div>d</div> 
    5. 
	
  5. 
		    <div>e</div> 
    6. 




	



	从上图看到，我们为b元素定义了position为absolute,并指定其离左边50px(这个50px是距离屏幕边界，如何相对于其父元素定位，后面有详细介绍)。由于指定了absolute属性，则b元素已经不再从属于流，因此流按照acde的方式进行排列。



	上述代码中有一个疑问，我们指定了b元素为absolute,但并没有指定b的top坐标，那为什么b元素显示在目前这个位置呢?这个可以这样理解，每一个元素可以使用top left right bottom四个位置进行定位，b元素在流中的时候，浏览器为其计算了top left right bottom四个位置值，当我们指定了absolute和left属性时，引擎直接修改了left和right属性，但top和bottom还使用了之前流中的位置，因此b元素会在目前屏幕中这个位置显示。如果我们再为b元素指定top或bottom属性，则b元素将会变更位置，按照指定位置显示。left和bottom、top和bottom是一组属性，当我们指定了left，则right自定按照width-left获得，如果指定了right，则left按照width-right获得，当同时指定了left和right则按照left处理。top和bottom同理。



	absolute属性会使元素根据相对于 static 定位以外的第一个父元素进行定位。这段话如何理解呢?请参看如下代码，了解子元素使用absolute的效果




    
	
  1. 
		<div>a</div> 
    2. 
	
  2. 
		    <div style="position:absolute;right:20px;">b</div> 
    3. 
	
  3. 
		    <div>c<div style="position:absolute;left:20px;">ccc</div></div> 
    4. 
	
  4. 
		    <div>d</div> 
    5. 
	
  5. 
		    <div>e</div> 
    6. 




	



	上述代码中我们在c元素内指定了元素ccc，ccc元素使用absolute定位，指定了其left=20px。但从上述截图中我们看到ccc元素指定的20px并不是距离c元素左边界20px而是距离整个屏幕边界，也就是body的边界20px。这就是由于c元素默认position属性为static，body默认的position属性也是static，因此ccc元素并没有依据c的位置也没有根据body进行定位而是根据屏幕位置进行了定位。好，我们修改一下c元素的posiiton属性看看效果。




    
	
  1. 
		<div>a</div> 
    2. 
	
  2. 
		    <div style="position:absolute;right:20px;">b</div> 
    3. 
	
  3. 
		    <div style="position:relative">c 
    4. 
	
  4. 
		        <div style="position:absolute;left:20px;">ccc</div></div> 
    5. 
	
  5. 
		    <div>d</div> 
    6. 
	
  6. 
		    <div>e</div> 
    7. 




	



	上述代码中，我们指定了c元素的定位属性为relative，这时，ccc元素属性为absolute时，就根据了c元素的边界进行了定位。那如果c元素也是absolute定位该是什么效果呢?




    
	
  1. 
		<div>a</div> 
    2. 
	
  2. 
		    <div style="position:absolute;right:20px;">b</div> 
    3. 
	
  3. 
		    <div style="position:absolute;left:80px">c 
    4. 
	
  4. 
		        <div style="position:absolute;left:20px;">ccc</div> 
    5. 
	
  5. 
		    </div> 
    6. 
	
  6. 
		    <div>d</div> 
    7. 
	
  7. 
		    <div>e</div> 
    8. 




	



	上述代码中我们修改了c元素为absolute定位，左边距80px,可以看到ccc元素根据c元素定位后的位置进行了相对定位。


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机