一、代码

<!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. HDU2539:点球大战

    Problem Description 在足球比赛中,有不少赛事,例如世界杯淘汰赛和欧洲冠军联赛淘汰赛中,当比赛双方经过正规比赛和加时赛之后仍然不分胜负时,需要进行点球大战来决定谁能够获得最终的胜利. ...

  2. 【Machine Learning in Action --2】K-近邻算法改进约会网站的配对效果

    摘自:<机器学习实战>,用python编写的(需要matplotlib和numpy库) 海伦一直使用在线约会网站寻找合适自己的约会对象.尽管约会网站会推荐不同的人选,但她没有从中找到喜欢的 ...

  3. Asp.Net调用Office组件操作时的DCOM配置 （转）

    Asp.Net调用Office组件操作时的DCOM配置 http://blog.csdn.net/gz775/article/details/6447758 在项目中将数据导出为Excel格式时出现“ ...

  4. Winsock SPI-Socks5-SSL

  5. mxml日期显示使用

    mxml代码: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx= ...

  6. sql数据库删除表的外键约束（INSERT 语句与 FOREIGN KEY 约束"XXX"冲突。该冲突发生于数据库"XXX"，表"XXX", column 'XXX）

    使用如下SQL语句查询出表中外键约束名称: 1 select name 2 from sys.foreign_key_columns f join sys.objects o on f.constra ...

  7. VS2008 安装后没有模板

    VS2008 安装过程没有任何报错  启动VS2008,新建项目时就成了这样,没有任何模板: 解决方法: 开始 –> 程序 –> Microsoft Visual Studio 2008– ...

  8. ubuntu apt-get update 连接不到指定的源

    问题描述: ubuntu apt-get update 连接不到指定的源,修改了几个软件源还是连接不上,同样的软件源在别的机器上都可以正常使用,后来发现每次 sudo apt-get update操作 ...

  9. centos7如何关闭防火墙

    1.centos7自带了firewall,而不是iptables: 关闭firewall: service firewalld stop 或者: systemctl stop firewalld 禁止 ...

  10. opencv----人脸美白算法，祛斑，祛痘，磨皮等

    现在各种手机camera软件都自带图像美颜处理,但是成熟的算法在网上很难搜到,博主也是自己摸索了自己做出来了,跟美图秀秀的处理效果相比,还不错,感觉很好,所以PO上来,与各位博友分享之. 首先是根据网 ...