一、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bb{
background: burlywood;
height: 50px; margin-left: 100px;
width: 100%;
} .cc{
background: burlywood;
height: 50px; margin-left: 100px;
/*此为默认的，等同于不写*/
width: auto;
} .dd{
background: burlywood;
height: 50px; position: relative;
left: 100px;
width: 100%;
} .ee{
background: burlywood;
height: 50px; position: relative;
left: 100px;
/*此为默认的，等同于不写*/
width: auto;
}
</style>
</head>
<body style="position: relative">
<div class="bb"></div>
<br>
<div class="cc"></div>
<br>
<div class="dd"></div>
<br>
<div class="ee"></div>
</body>
</html>
二、效果图
最左边的时候：
最后边的时候：
三、结论
- div不明确设置width,那么默认的为width:auto.
- 只有使用 margin-left+auto 定位的时候，才能使div刚好占满整个屏幕。
- 可以理解的在使用 margin-left+100% 的时候，div会向右边多出margin-left的距离。（因为100%是相对于其父元素而言，即当前的body）
四、问题
无法理解的是使用position:relative的时候，不管width如何设置都不能刚好占满屏幕，why？
CSS中margin和position:relative的定位问题的更多相关文章
-
CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
-
CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
-
CSS中margin属性
css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并
-
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
-
[转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
-
CSS中margin：auto什么意思？margin：auto属性的用法详解
我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...
-
使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
-
css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
-
CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
随机推荐
-
jQuery使用方法
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素. 选择表达式可以是CSS选择器: 1 $(document)//选择整个文档对象2 ...
-
2005年IT行业趋势Top10
未来三年内对组织有潜在的重大影响IT趋势.这里的IT趋势的摘要: 1. 计算位于任何地方 智能手机,平板,电视盒,可穿戴设备,可连接的屏幕,对于适应移动用户所求要的整体环境的需求在不断增强.这会继续提 ...
-
移动,企业社交（sharepoint2013）--jindahao(金大昊)
MobileIncreasingly, a major component of sharing and collaborating involves mobile access. SharePoin ...
-
img、input到底是行内还是块级元素？
一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素. 行内非替换元素,例如, height/width/padding to ...
-
block_dump观察Linux IO写入的具体文件(mysqld）
一.使用方法: 二.基本原理: 三.总结 很多情况下开发者调测程序需要在Linux下获取具体的IO的状况,目前常用的IO观察工具用vmstat和iostat,具体功能上说当然是iostat更胜一筹 ...
-
实例讲解MSSQL日期相加减比大小函数 转
1. 当前系统日期.时间select getdate() 2. dateadd 在向指定日期加上一段时间的基础上,返回新的 datetime 值例如:向日期加上2天select dateadd(day ...
-
将数组写入Plist文件中
-(void)writeToPlist:(NSArray *)uploadingfiles Name:(NSString *)name { NSMutableArr ...
-
ps2016新功能
1 内容识别缩放(alt ctrl shift c) 2 内容感知移动 3 画笔大小和画笔硬度调整 alt + 鼠标右键:上下为硬度 ...
-
C#统计给定的文本中字符出现的次数，使用循环和递归两种方法
前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...
-
【308】Python os.path 模块常用方法
参考:Python os.path 模块 参考:python3中,os.path模块下常用的用法总结 01 abspath 返回一个目录的绝对路径. 02 basename 返回一个目录的基名 ...