position、盒模型的故事_pisition 盒模型-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39571197/article/details/93790453

本文深入探讨了CSS盒模型的概念，包括标准盒模型与IE盒模型的区别，以及position属性在不同盒模型中如何影响元素的定位。通过实例展示了margin、padding、border在不同情况下的作用。

可以看出来，和margin没什么关系、、

<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        padding: 40px;
        margin: 40px;
        width: 800px;
        height: 100px;
        border: 5px solid red;
        background-color: yellow;
    }

    .widget {
        width: 20px;
        height: 20px;
        background-color: blue;
    }
</style>
<div style="padding:20px 40px 0;">
    <h4>盒子</h4>
    margin->border->【padding-[content]->padding】->border->margin
    <h4>IE盒子模型</h4>
    只是width、height的计算方法不同，与position没关系（见最后一个例子）
</div>
<div class="container">
    <!-- absolute -->
    <!-- 参照物：padding + content-box-->
    <div class="widget" style="position: absolute;top: 0;"></div>
    <div class="widget" style="position: absolute;top:40px;left: 0;"></div>
    <div class="widget" style="position: absolute;bottom:0;"></div>
    <div class="widget" style="position: absolute;right:0;"></div>
</div>
<div class="container">
    <!-- relative -->
    <!-- 参照物：content-box -->
    <div class="widget" style="position: relative;top: 0;"></div>
    <div class="widget" style="position: relative;top:40px;left: 0;"></div>
    <div class="widget" style="position: relative;bottom:0;"></div>
    <div class="widget" style="position: relative;right:0;"></div>
</div>
<div class="container" style="box-sizing: border-box;height: 260px;">
    <!-- IE盒模型 -->
    <!-- absolute 参照物：padding + content-box -->
    <!-- relative 参照物：content-box -->
    <div class="widget" style="position: absolute;top: 0;left: 0;"></div>
    <div class="widget" style="position: relative;top: 0;left: 0;"></div>
</div>
</body>