margin-top=10%，这10%居然是相对于父元素的宽度，宽度？

生活的小欢呼

于 2022-01-27 09:56:56 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/xiaohuanhu/article/details/122712106

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

是的你没有看错，是父元素的width，不是height

明明记得之前学的是可以用margin-top:50%,transform:translateY(-50%)来实现垂直居中的啊，怎么今天用了一下margin-top=5%高度竟然有点不对劲？？？搜索了一下发现padding和margin无论left还是right还是top还是bottom都是相对于父元素的width的，上验证代码：

<template>
   <div class="father">
      <div class="sonOne"></div>
      <div class="sonTwo"></div>
   </div>
</template>

<script>
export default {

}
</script>

<style  scoped>
.father{
    width: 500px;
    height: 300px;
    background: rgb(171, 202, 228);
}
.sonOne{
     width: 500px;
    height: 50px;
    background: rgb(95, 109, 189);
}
.sonTwo{
     width: 500px;
    height: 100px;
     margin-top: 10%;
    background: rgb(43, 66, 197);
}
</style>