一、代码

<!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>

二、效果图

最左边的时候:

最后边的时候:

三、结论

  1. div不明确设置width,那么默认的为width:auto.
  2. 只有使用 margin-left+auto 定位的时候,才能使div刚好占满整个屏幕。
  3. 可以理解的在使用 margin-left+100% 的时候,div会向右边多出margin-left的距离。(因为100%是相对于其父元素而言,即当前的body)

四、问题

无法理解的是使用position:relative的时候,不管width如何设置都不能刚好占满屏幕,why?

CSS中margin和position:relative的定位问题的更多相关文章

  1. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  2. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  3. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. CSS中margin:auto什么意思?margin:auto属性的用法详解

    我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...

  7. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  8. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  9. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

随机推荐

  1. hdu_5805_NanoApe Loves Sequence(xjb搞)

    题目链接:hdu_5805_NanoApe Loves Sequence 题意: 给你n个数,现在要删一个数,删每个数的概率是一样的,现在问你删一个值后的相邻数绝对值最大差的期望是多少,因为担心精度误 ...

  2. Entity Framework技巧系列之十一 - Tip 42 - 45

    提示42. 怎样使用Code-Only创建一个动态模型 背景: 当我们给出使用Code-Only的例子,总是由创建一个继承自ObjectContext的强类型的Context开始.这个类用于引导模型. ...

  3. LeetCode OJ 113. Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  4. nginx php mysql 集成安装包

    经过多次的苦苦寻找,终于找到一款 集成了nginx 和mysql php的包.只需一键安装即可. 且可以修改其中的nginx mysql 与php的版本. 解压此文件lnmp???ɰ?n-1.6p-5 ...

  5. SQL SERVER 2000 遍历父子关系数据的表(二叉树)获得所有子节点 所有父节点及节点层数函数

    ---SQL SERVER 2000 遍历父子关系數據表(二叉树)获得所有子节点 所有父节点及节点层数函数---Geovin Du 涂聚文--建立測試環境Create Table GeovinDu([ ...

  6. MySQL数据库MyISAM和InnoDB存储引擎的比较【转载】

    转自 http://www.cnblogs.com/panfeng412/archive/2011/08/16/2140364.html MySQL有多种存储引擎,MyISAM和InnoDB是其中常用 ...

  7. ListView控件的Insert、Edit和Delete功能(第一部分)

    摘自:http://blog.ashchan.com/archive/2007/08/28/listview-control-insert-edit-amp-delete-part-1aspx/ Li ...

  8. 【dp 背包变形】 poj 1837

    #include <cstdio> #include <memory.h> #include<iostream> using namespace std; ][]; ...

  9. OpenGL中glFrustum()和gluPerspective()的相互转换

    OpenGL中在窗口的大小发生变化的时候会触发resize()函数,这里会传入一个新的宽和高,在resize()函数中我们会设置投影矩阵,在可以使用OpenGL基础函数glFrustum()函数和gl ...

  10. 【HDU 5833】Zhu and 772002(异或方程组高斯消元讲解)

    题目大意:给出n个数字a[],将a[]分解为质因子(保证分解所得的质因子不大于2000),任选一个或多个质因子,使其乘积为完全平方数.求其方法数. 学长学姐们比赛时做的,当时我一脸懵逼的不会搞……所以 ...