CSS中margin和position:relative的定位问题

一、代码

<!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,那么默认的为auto.
只有使用 margin-left+auto 定位的时候，才能使div刚好占满整个屏幕。
可以理解的在使用 margin-left+100% 的时候，div会向右边多出margin-left的距离。（因为100%是相对于其父元素而言，即当前的body）

四、问题

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

相关阅读:
Web后门工具WeBaCoo
苹果内存取证工具volafox
PlayMaker GUI的Normalized
Arduino可穿戴教程之第一个程序——选择端口(三)
缩略图信息提取工具vinetto
jquery的defer
toDo
瀑布流案例
js基本知识6
js基本知识5

原文地址：https://www.cnblogs.com/LiuChunfu/p/5149905.html