position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;

设置布满整个父范围,设置了absolute的元素可以通过以上4个属性来展开面,relative的不行
position:absolute;可以实现面拉伸,定位的效果

 
position是相对于最外层边界,这个边界不包括是除掉margin与border的部分 
width是指内容区域
 
position:absolute;

left:0px;

 

right:0px;

 
  width:100%;
 
  <div id="body2">
<div id="main2"></div>
</div>

 
 
#main2{
position:absolute;
left:0px;
right:0px;
height:10px;
background:orange;
}

 
#body2{
padding:5px;
  width:800px;
  height:40px;
  margin:10px auto;
  border:10px solid black;
  position:relative;
  background:red;

}
position:absolute;
width:100%; 浮动了位置会随意
不设置(不浮动)
position:absolute;
left:0px;
right:0px;
 
设置
position:absolute;
left:0px;
right:0px;

position:absolute width的更多相关文章

  1. 导航position:absolute

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. position:absolute 的深入探讨

    position:absolute 参考谁进行定位的问题.之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属性的时候,该元素的position:absolute会参 ...

  3. CSS里面position:relative与position:absolute 区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  4. position:absolute与position:relative

    position的默认属性值均是static,静态. [position:absolute]定位为absolute的层脱离正常文本流,但其在正常流中的位置不再存在. 大多数人可能会觉得absolute ...

  5. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  6. IE6和IE7下绝对定位position:absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  7. 元素加了position:absolute则该元素的text-align:center居中失效的解决办法

    position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: trans ...

  8. position:absolute、float、display:inline-block 区别

    position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. fl ...

  9. position:absolute的发现。

    使用.box{ width:100px; height:100px; background:red; position:absolute; left:0; right:0; top:0; bottom ...

随机推荐

  1. cmpp 短信平台

    背景: 物联网一般是在设备上安装sim卡,通过2g网络来进行设备与云端系统的交互,网络都是通过移动的基站来进行网络传输的,所以一旦移动的基站有变动,比如流量降级,光缆割接,其他故障登 都会导致2g络的 ...

  2. mysql之replicate_do_table/replicate_ingore_table/replicate_wide_do_table/replicate_wide_ingore_table

    参考:http://yhqlzz.blog.51cto.com/2557314/1159084/ mysql官网:http://dev.mysql.com/doc/refman/5.1/en/repl ...

  3. iOS 如何缩小打包项目ipa大小

    之前项目上线完全由技术老大搞,这次独立开发自己来,觉得自己的打包项目体积略大,网上搜索了一些比较不错的方法,这里总结下 1.配置编译选项 (Levels选项内)Genetate Debug Symbo ...

  4. 八款开源 Android 游戏引擎[转]

    记录一下,以备不时之需~~~~~ 虽然android学了点点,然后现在又没学了(我为啥这么没有恒心呢大哭).以后有时间还是要继续学android的,一定要啊!虽然现在没学android游戏编程,不过还 ...

  5. Kafka学习(一)kafka指南(about云翻译)

    kafka 权威指南中文版 问题导读 1. 为什么数据管道是数据驱动企业的一个关键组成部分? 2. 发布/订阅消息的概念及其重要性是什么? 第一章 初识 kafka 企业是由数据驱动的.我们获取信息, ...

  6. Office Web Apps Server 2013与PDF(一)

    好吧--这个消息有点旧,迟了将近4个月. Office Web Apps是微软各大服务产品系列中的一个基础服务,可以为SharePoint 2013.Exchange 2013.Lync 2013提供 ...

  7. 代码备份:按模式划分椭圆轨迹渐变matlab

    x=sqrt(a^*(-y^/b^)); r=ceil(+*y); x=ceil(x); I(m/,m/+x)=+*y; elseif r== I(m/::m/+,m/+x::m/++x)=+*y; ...

  8. 【泰语歌】กลับคำสาหล่า 歌手:Mike Piromporn

    Darling,Please don't leave me. 很短的一句话,可能会摧毁我们在一起的所有美好时光.

  9. OpenCV学习笔记二:OpenCV模块一览

    注:本系列博客基于OpenCV 2.9.0.0 一,一览图: 二,模块: /* 基础库 */ 1,opencv_core(链接) ,opencv最基础的库.包含exception,point,rect ...

  10. 多线程编程中的join函数

    # coding: utf-8 # 测试多线程中join的功能 import threading, time def doWaiting(): print 'start waiting1: ' + t ...