margin、padding、position的故事

最新推荐文章于 2022-05-04 23:27:36 发布

[暂停使用]日行一善

最新推荐文章于 2022-05-04 23:27:36 发布

阅读量182

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39571197/article/details/93783841

版权

前端专栏收录该内容

100 篇文章 0 订阅

订阅专栏

4个例子，margin同理

正常使用：

<body>
<div style="width:1200px;height: 400px;background-color: blue;">
    <div style="padding-top: 10%;">
        <p style="position: relative">
            默认使用情况：参照物为父元素(前提是父元素不为inline元素)
        </p>
    </div>
</div>
</body>

非正常使用：

<body>
<div style="width:1200px;height: 400px;background-color: blue;">
    <div style="width:800px;height: 400px;background-color: red;display: inline;">
        <div style="padding-top: 10%;">
        </div>
    </div>
</div>
</body>

<body>
<div style="width:1200px;height: 400px;background-color: blue;">
    <div style="width:800px;height: 400px;background-color: red;">
        <div style="position: absolute;top:0;right: 0;bottom: 0;left: 0;padding-top: 10%;">
        </div>
    </div>
</div>
</body>

<body style="width: 1500px;position: absolute;">
<div style="width:1200px;height: 400px;background-color: blue;position: absolute;">
    <div style="width:800px;height: 400px;background-color: red;">
        <div style="position: absolute;top:0;right: 0;bottom: 0;left: 0;padding-top: 10%;">
        </div>
    </div>
</div>
</body>

[暂停使用]日行一善

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin、padding、position的故事

4个例子，margin同理正常使用：<body><div style="width:1200px;height: 400px;background-color: blue;"> <div style="padding-top: 10%;"> <p style="position: relative"> ...
复制链接

扫一扫

专栏目录