一、代码

<!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. 安装GlusterFS

    Step 1-至少需要两个节点 两个节点安装fedora 20 ,分别为“server1”和“server2” 网络连接 至少两个虚拟磁盘,一个用于OS安装,一个用于支持GlusterFS存储(sdb ...

  2. hud 2549 壮志难酬

    Problem Description 话说MCA山上各路豪杰均出山抗敌,去年曾在江湖威名显赫的,江湖人称<万军中取上将首级舍我其谁>的甘露也不甘示弱,“天将降大任于斯人也,必先劳其筋骨, ...

  3. iOS中静态库-.a文件生成和使用

    最近在使用使用一个网上的Demo的时候. 出现另一令人烦恼的问题 . 就是它里面有嵌套的工程. 如下图所示. 工程里面还嵌套有一个工程. 真的是让人煞费苦心 …其实这个问题看起来并不是很难, 如果是一 ...

  4. 在Linux系统如何让程序开机时自动启动

    在Linux系统如何让程序开机时自动启动      核心提示:系统的服务在开机时一般都可以自动启动,那在linux系统下如果想要程序在开机时自动启动怎么办?我们知道在 windows系统“开始”--& ...

  5. docker installation on ubuntu

    Ubuntu Docker is supported on these Ubuntu operating systems: Ubuntu Xenial 16.04 (LTS) Ubuntu Trust ...

  6. Delphi XE2 生成的.exe 在未安装有Delphi的电脑上运行提示 “丢失 rtl160.bpl”

    解决方案: XE2中加入了多平台的概念,默认的Release模式,也是带包编译,带运行时库的,所以,需要手工设置一下工程选项: 打开工程以后,Project-->Options-->左侧树 ...

  7. struts2获取请求参数的三种方式及传递给JSP参数的方式

    接上一篇文章 package test; import com.opensymphony.xwork2.ActionSupport; import javax.servlet.http.*; impo ...

  8. struts2中的文件上传，文件下载

    文件上传: Servlet中的文件上传回顾 前台页面 1.提交方式post 2.表单类型 multipart/form-data 3.input type=file 表单输入项 后台 apache提交 ...

  9. linux command----vi

    vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器.Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能. ...

  10. xcconfig 文件配置文件 问题

    与公司 QA 聊天,已不止一次被吐槽说移动端从开发环境转到生产环境时,还要靠修改代码来配置对应的环境参数.她认为,从 App 转测试之后,就不应该再修改代码,可以把所有的环境配置都整合到配置文件中,这 ...