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. java代码格式化

    Java source formatting You are probably familiar with the Eclipse hotkeys to automatically format yo ...

  2. Yii简单使用阿里云短信教程!

    首先我们下载官方完整包的SDK官方标明了啊,PHP版本一定要不低于5.5下载后目录如下: 我们只需要将目录里的api_sdk复制出来到Yii项目的根目录的common模块下面的extensions文件 ...

  3. 获取jsapi_ticket

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

  4. php 字符串截取

    $str="3,22,11,444,33,1,3455,33,22,444,55,66,77,88,99,554336,"; echo substr($str,0,strlen($ ...

  5. Web应用程序使用Hibernate

    在本文中,我们将学习使用hibernate创建一个Web应用程序. 对于创建Web应用程序,我们使用JSP表示逻辑层,使用Bean类表示数据,以及使用DAO类操作数据库.在hibernate中创建简单 ...

  6. Spring MVC多项单选按钮

    以下示例显示如何在使用Spring Web MVC框架的表单中使用多选按钮(RadioButton).首先使用Eclipse IDE来创建一个WEB工程,实现一个让用户可选择自己喜欢的数字的功能.并按 ...

  7. Muduo网络库源代码分析(六)TcpConnection 的生存期管理

    TcpConnection是使用shared_ptr来管理的类,由于它的生命周期模糊.TcpConnection表示已经建立或正在建立的连接.建立连接后,用户仅仅须要在上层类如TcpServer中设置 ...

  8. -webkit-transition: all .2s ease-in-out;

    W3C标准中对CSS3的transition这是样描述的:CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并 ...

  9. [转]Java中怎样把数组转换为ArrayList

    方法汇总: Element[] array = {new Element(1),new Element(2),new Element(3)}; ArrayList<Element> arr ...

  10. 【Android 多语言切换简单实例分享】

    一.Android多语言切换 Android应用的开发不可能仅仅针对某一个国家或者区域使用,各国间语言文化各不同样,因此一个优秀的APP必须支持多种语言,为了实现这个特性,Android给出了一个解决 ...