每天一个小知识（1）

最新推荐文章于 2024-06-17 22:15:35 发布

Myily-FY

最新推荐文章于 2024-06-17 22:15:35 发布

阅读量144

点赞数

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/qq_19594239/article/details/120309534

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

margin-top的影响

举个栗子：父级整体高度为400px，子元素second为高度的一半，想要去将子元素放到下一半，使用margin-top:50% 发现不是在下一半而是距离底部有一定的距离，常规思想来想50%不就是一半嘛，不应该站一半的高度？

<body>
    <div class="first">
        <div class="second">
        </div>
    </div>
</body>

<style>
.first{
    width: 300px;
    height: 400px;
    border: 2px solid red;
}
.second{
    width: 100%;
    height: 50%;
    background-color: aqua;
    margin-top:50%
    
}
</style>

结果却不是想要的结果，那么查阅资料得知呢，margin-top 是基于父级元素的宽度来计算的，那我们将 margin-top:66.666%; 改过来发现，

那么当然还有其他解决办法：

1.可以使用定位布局来

<style>
.first{
    width: 300px;
    height: 400px;
    border: 2px solid red;
    position: relative;
}
.second{
    width: 100%;
    height: 50%;
    background-color: aqua;
    position: absolute;  
    top: 50%;
}
</style>

同样可以实现相同的效果

2.就是占父级元素宽度百分比的一半

3.父级overflow:hidden

Myily-FY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一个小知识（1）

margin-top的影响举个栗子：父级整体高度为400px，子元素second为高度的一半，想要去将子元素放到下一半，使用margin-top:50% 发现不是在下一半而是距离底部有一定的距离，常规思想来想50%不就是一半嘛，不应该站一半的高度？<body> <div class="first"> <div class="second"> </div> </div></body&g
复制链接

扫一扫