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. 关于linux系统下 无法解析主机的问题

    linux无法解析主机 xxx: 解决方法: 1. sudo gedit /etc/hosts 找到如下行: 127.0.1.1       XXX 将其修改为: 127.0.1.1       (你 ...

  2. 40-语言入门-40-C小加之随机数

    题目地址: http://acm.nyist.net/JudgeOnline/problem.php?pid=255   15 20 32 40 67 89 300 400   代码: #includ ...

  3. 配置LANMP环境(1)-- 安装虚拟机VMware与安装CentOS7.2系统

    一.安装虚拟机VMware 1.下载VMware傻瓜式安装 2.配置                二.安装CentOS7.2系统 镜像下载链接 1.放入ios镜像文件之后,启动虚拟机,选择7.0+的 ...

  4. Redis Scan的使用方式以及Spring redis的坑

    SpringRedisTemplate针对这个Scan进行了封装,示例使用(针对最新库spring-data-redis-1.8.1.RELEASE): Set<Object> execu ...

  5. C字符串复制

    void mystrcpy(char *from, char *to) { for(; *from != '\0'; from++, to++) { *to = *from; } *to = '\0' ...

  6. node.js cmd常用命令

    cmd1.c:如果我们想访问c盘,那么我们需要在命令行中输入c:就行了 2.cd..cd..就可以返回上层目录 3.cd mmcd mm即可访问mm文件夹 4.dir如果想查看该文件夹下有哪些文件,则 ...

  7. 微信小程序结构分析

    1.Console页面:控制台信息页两个作用: (1)开发直接输入代码并且进行调试: (2)显示小程序的错误输出: 2.Sources页面:源文件调试信息页,用于显示当前项目的脚本文件. 3.Netw ...

  8. IOS学习笔记(五)——UI基础UIWindow、UIView

    在PC中,应用程序多是使用视窗的形式显示内容,手机应用也不例外,手机应用中要在屏幕上显示内容首先要创建一个窗口承载内容,iOS应用中使用UIWindow.UIView来实现内容显示. UIWindow ...

  9. poj 3270(置换 循环)

    经典的题目,主要还是考思维,之前在想的时候只想到了在一个循环中,每次都用最小的来交换,结果忽略了一种情况,还可以选所有数中最小的来交换一个循环. Cow Sorting Time Limit: 200 ...

  10. SonarQube 平台搭建

    1. 前期准备 ① 环境 jdk 1.8 配置(见其他随笔) MySQL 5.7(见其他随笔) ② 工具下载 sonarqube 下载 <链接:https://pan.baidu.com/s/1 ...