注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Copper peas ' Bolg

Keep On Moving...This Is My Life...

 
 
 

日志

 
 

【原】div 层的绝对定位,相对定位,溢出,字体换行,高度自动增长  

2011-03-23 17:16:27|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

    一直都在写后台程序,最近公司要求我去做js交互,也就是一部分前端,我靠,层的问题把我害惨了,抽时间专门写了下面的测试代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*
层需要居中margin:0 auto;

浮动层的相对定位
就是父容器的position 用relative ,浮动层的position 用absolute 。

absolute的参考点是相对于离它最近的祖父级且定义了position:relative|absolute|fixed;的元素。如果祖父级都没有设置,那么默认相对于html来定义的【注意:不是body】。z-index在元素为:position:relative|absolute|fixed的时候才有意义。

position:absolute;有点像两层楼的电影院,一楼的人跑到二楼去,因此它的位置就可以让给其他人使用。
position:relative;有点像一个人占了一个位置,但又想去厕所,所以就在位置上放把伞,虽然人离开了,但位置还保留着。
*/
body {font-size:12px;}
#one{border:1px solid #0033CC; width:100%; height:100%; text-align:center; margin:0px; padding:0px}

#ss{border:1px solid #0033CC; width:600px; height:500px;position: relative;}
#a1,#b1{ background-color:#CCC; border:1px solid #0033CC; width:200px; height:200px; float:left; margin:0px 5px; }
#c1{ background-color:#0066FF; border:1px solid  #FF0000;  width:100px; height:100px;position:absolute;right:30px; top:30px;}
#d1{ background-color: #fff; border:1px solid #FF0000;  width:100px; height:100px;position:absolute; right:10px; top:20px;}

/*如我们想在ie8,firefox,chrome等高端浏览器下设置字体为14个像素,ie6为12个像素,那么css就这样写*/
#text{font-size:14px!important;font-size:12px;}

/*或者说高端浏览器中使用透明的png图片,而ie6本身不支持透明图片,只能使用gif,所以css中这样写*/
#test{background:("a.png") no-repeat!important;background:url(ie6.gif) no-repeat}

/*优先是自动高度,然后才获取最低高度为800px, 详情查看#id*/
#id{height:auto!important;height:100px; min-height:100px; border:1px solid #0033CC; width:100px;word-break:break-all;word-wrap:break-word;}

#two{position: relative; border:1px solid #0033CC; width:800px; height:500px;margin:0 auto;}
#a  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px;}
#c  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px;}
#d  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px;}
#b  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px;}
#e  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px;}
#f  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px;word-break:break-all;word-wrap:break-word;text-align:left; overflow:auto;}
#h  {background-color:#0066FF; border:1px solid  #FF0000;  width:100px; height:100px;position: relative;left:20px; top:10px;float:left;word-break:break-all;word-wrap:break-word; text-align:left}
#j  {background-color:#0066FF; border:1px solid  #FF0000;  width:100px; height:100px;position: relative;left:20px; top:10px;}
#g  {background-color:#CCC; border:1px solid #0033CC; width:100px; height:100px; float:left; margin:5px 5px; position:absolute; right:10px;
top:20px;word-break:break-all;word-wrap:break-word;text-align:left; overflow:hidden}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>dad</title>
</head>
<body>
<div id="one">

    <div id="ss">
  <div id="a1">a1</div>
  <div id="b1">b1</div>
  <div id="c1">c1</div>
  <div id="d1">d1</div>
    </div>
 
 
    <div id="two">
 <div id="a">a</div>
 <div id="b">b</div>
 <div id="g">g 定义了 position:absolute;float:left;,定位就是相对于定义了 position的父级位置,原位置腾出来,内容跟随走</div>
 <div id="f">ffdsafddsadsadsaddsadsdsdsadsadsadsadsadsadsadsadsadsadsdsadsadsadsdadsadsadsadsadssadsadsdsadsadads232321321dsa441dadsdsa</div>
 <div id="h">h 定义了 float:left;position: relative; 定位就相对于自己正常位置的移动,同时原位置保留</div>
 <div id="e">e</div>
 <div id="j">j 定义了position: relative; 定位就相对于定义了 position的父级位置的移动,同时原位置保留,内容不在层里面</div>
    <div id="c">c</div>
 <div id="d">d</div>
 </div>
 
 <div id="id">
 dadsdasdsdadsadasd
 sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>
 <hr>
 sdsd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>sd</br>高度大于100自动变长哦,给td一样
 
 </div>
</div>
</body>
</html>

  评论这张
 
阅读(901)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018