margin设置百分比

最新推荐文章于 2023-09-19 08:09:14 发布

神影天初

最新推荐文章于 2023-09-19 08:09:14 发布

阅读量3.9k

点赞数 1

分类专栏： css 文章标签： css margin

本文链接：https://blog.csdn.net/qq_35134066/article/details/86608536

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。

看如下示例：

<style>
    .fu {
        width: 400px;
        height: 300px;
        background: blue;
        overflow: hidden;
    }
    .zi {
        width: 20px;
        height: 20px;
        background: red;
        margin-top: 50%;
    }
</style>
<body>
    <div class="fu">
        <div class="zi"></div>
    </div>
</body>

设置margin-top: 50%;基于父容器宽度相当于margin-top: 200px;

所以代码的效果如图所示。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

神影天初

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
margin设置百分比

margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。看如下示例：&lt;style&gt; .fu { width: 400px; height: 300px; background: blue; overflow: hidden; }...
复制链接

扫一扫