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

最新推荐文章于 2021-08-18 11:53:32 发布

weixin_33716941

最新推荐文章于 2021-08-18 11:53:32 发布

阅读量299

点赞数

一、代码

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

weixin_33716941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中margin和position:relative的定位问题

一、代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫