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. ubuntu 16.04菜单栏不显示

    解决办法: restart unity-pannel-service

  2. finsh初步

    一. finsh在RT-Thread中被设计成一个独立的线程,它试图从外部设备中获得用户的输入,然后对用户命令进行解析执行. 正确使用finsh需要一个关联过程: rt_hw_board_init() ...

  3. 【Python + ATX基于uiaotumator2】之Android—APP自动化简易例子

    上代码: import uiautomator2 as u2 from time import sleep d = u2.connect_usb('608ad0fe') #打开小卖 # d(text= ...

  4. 获取jsapi_ticket

    String accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&a ...

  5. GoogleMap-------解决不能使用问题

    前言:由于中国大部分Android手机中的Google服务都被阉割掉了,所以导致GoogleMap无法使用,可以用一下方法解决. 1.不能使用GoogleMap 2.若手机上装有安装市场之类的软件可搜 ...

  6. CentOS6.8部署SVN

    第1章 安装svn服务 1.1 准备操作系统并查看系统环境 [root@localhost ~]# cat /etc/redhat-release CentOS release 6.8 (Final) ...

  7. linux 大量的TIME_WAIT解决办法(转)

    发现存在大量TIME_WAIT状态的连接tcp        0      0 127.0.0.1:3306              127.0.0.1:41378             TIME ...

  8. Android 自定义权限 (<permission> <uses-permission>)

    在android系统的安全模型中,应用程序在默认的情况下不可以执行任何对其他应用程序,系统或者用户带来负面影响的操作.如果应用需要执行某些操作,就需要声明使用这个操作对应的权限. (在manifest ...

  9. jmGraph:一个基于html5的简单画图组件

    jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...

  10. [Spring Data Repositories]学习笔记--定义自己的repository

    有时,我们会需要用到自己定义的一些查询方法,可以按照下面几步进行. 1. 定义一个包含该方法的接口 Interface UserRepositoryCustom { public void someC ...