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. 外部jar包 @Service 无法注解无法扫描问题

    在确保spring 配置 无误的情况下,如: <context:component-scan base-package="your.can.pakeage"></ ...

  2. apache gzip

    1.首先启动模块mod_deflate.so和mod_headers.so 2.httpd.conf #文件缓存时间配置<FilesMatch ".(flv|gif|jpg|jpeg| ...

  3. tcpreplay工具安装使用

    一.Tcpreplay功能简介 首先推荐一个网站:http://tcpreplay.synfin.net/ ,上面有Tcpreplay的安装包和很多文档,包括手册.man页和FAQ等. Tcprepl ...

  4. Win10:如何修改双网卡的优先级?

    很多使用双网卡的IT之家网友可能遇到一种情况,比如笔记本电脑在插上网线后还是用WiFi,得手动关闭无线连接才能转换到有线连接.如何才能调整合适的网络优先级呢?一般来说,有两种方法比较常用. 一.调整网 ...

  5. android:clearTaskOnLaunch的用法

    比如你的应用里有N个Activity,其中有个是设置页面,你从主页面进入到设置页面设置了一些东西之后,突然,按了下Home键,回到了Android的Home,这时候你做了些别的事情,然后你再次点击你的 ...

  6. Android Otto框架浅析

    今天要介绍的是一个Android中使用得比較多的android 事件总线 EventBus模式的一个框架Otto. Otto 官网:http://square.github.io/otto/ 一.An ...

  7. SlidingMenu官方实例分析4——AttachExample

    AttachExample这个类没有继承BaseActivity,而是FragmentActivity,写到这好像感悟到了 为什么官方现在都推荐使用Fragment而不是Activity,因为Frag ...

  8. hdu 1534(差分约束+spfa求最长路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1534 思路:设s[i]表示工作i的开始时间,v[i]表示需要工作的时间,则完成时间为s[i]+v[i] ...

  9. OpenCV学习笔记五:opencv_legacy模块

    opencv_legacy,顾名思义,该模块是用于兼容以前的opencv代码而设立的. 如果你希望用最新的opencv代码和特性,请勿使用该模块.

  10. 深入理解IEnumerable和IQueryable两接口的区别

    from:http://blog.csdn.net/ydm19891101/article/details/50969323 无论是在ado.net EF或者是在其他的Linq使用中,我们经常会碰到两 ...