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. CentOS sendmail安装及邮件域名配置

    http://www.centoscn.com/CentosServer/lighttpd/2013/0726/650.html sendmail是Linux下优秀的邮件系统.在不做任何设定的情况下, ...

  2. 设计模式中类的关系之依赖关系(Dependence)

    依赖关系是一种使用关系,特定事物的改变有可能会影响到使用该事物的其他事物,在需要表示一个事物使用另一个事物时使用依赖关系.可以简单的理解,就是一个类A使用到了另一个类B,而这种使用关系是具有偶然性的. ...

  3. spring cloud与K8S

    链接:https://www.zhihu.com/question/50806354/answer/139653085 spring cloud +docker 当然没有问题,只是当我们搭建集群实现高 ...

  4. What is the difference between application server and web server?

    http://stackoverflow.com/questions/936197/what-is-the-difference-between-application-server-and-web- ...

  5. 学习spring2--跟我一起学Spring 3(3)–使用Spring开发第一个HelloWorld应用

    http://www.importnew.com/13246.html     首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所有文章 资讯 ...

  6. python django -7 Git与项目

    git的使用,主要包括: 本地仓库的命令 远程仓库的命令 项目需求.页面.模型类的设计,及页面的使用 Git简介 Git是目前世界上最先进的分布式版本控制系统 安装 sudo apt-get inst ...

  7. linux系统启动过程具体解释-开机加电后发生了什么 --linux内核剖析(零)

    本文參考了例如以下文章 深入理解linux启动过程 mbr (主引导记录(Master Boot Record)) 电脑从开机加电到操作系统main函数之前执行的过程 详细解释linux系统的启动过程 ...

  8. hdu 1078 FatMouse and Cheese【dp】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意:每次仅仅能走 横着或竖着的 1~k 个格子.求最多能吃到的奶酪. 代码: #include ...

  9. Java中将时间戳转化为Date类型

    时间戳timestamp,从前端接收到后.他能够是一个long或者包装类Long再或者是个String类型.仅仅需 new Date(时间戳) 就能够直接转化为java.util.Date类型. 转化 ...

  10. 转载:DenseNet算法详解

    原文连接:http://blog.csdn.net/u014380165/article/details/75142664 参考连接:http://blog.csdn.net/u012938704/a ...