样式问题记录

遇到的样式问题的记录

border 相关

CSS问题-鼠标移入icon时（hover状态），会造成页面内容有上下移动的情况

.icon-radius {
    border: 0.5px solid #dde0e1;
    &:hover {
        border: 0;
    }
}

问题：可以发现是因为border的变化，导致该ICON高度宽度发生变化，所以出现了上下移动的问题

解决办法：

1. 设置border的颜色，而不是直接让border为0，border-color: transparent;
2. 给它的外层元素，该行父元素，添加固定的高度

font-family的Safari兼容问题

body {
  font-family: 'Helvetica Neue, Helvetica, PingFang SC, Arial, Microsoft Yahei, Hiragino 		Sans GB, Heiti SC';
}

这样的写法在Mac的Safari浏览器和Chrome浏览器中，展示出的字体差异蛮大，解决办法就是去掉，字体的引号

批量增加margin

@each $margin in 8, 10, 16, 20, 24, 32 {
    .mt#{$margin}{
        margin-top: #{$margin}px;
    }
    .mb#{$margin}{
        margin-bottom: #{$margin}px;
    }
    .ml#{$margin}{
        margin-left: #{$margin}px;
    }
    .mr#{$margin}{
        margin-right: #{$margin}px;
    }
}

vue动画

transition-group 组件

用于多个元素 / 组件 的过渡效果，渲染一个真实的 DOM 元素。默认渲染 ，可以通过 tag 属性配置哪个元素应该被渲染。

<transition-group name="entrance-fade" tag="div">
    <div v-for="item in list" :key="item.id">
        {{item.value}}
    </div>
</transition-group>

每个 的子节点必须有 独立的 key ，动画才能正常工作

.entrance-fade-enter-active, .entrance-fade-leave-active {
  transition: all .3s;
}
.entrance-fade-enter-active{
  transform: translate3d(0, 0, 0);
}
.entrance-fade-enter, .entrance-fade-leave-active {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}
.entrance-fade-leave {
  transform: translate3d(0, 0, 0);
}

不同大小的文字如何底部对齐

<p class="upper-letter" style="color: rgb(51, 51, 51);">
       01<span class="step-text">选择类型</span>
</p>

.upper-letter {
    font-weight: 700;
    font-size: 36px;
    color: #333;
    position: relative;
    line-height: 1;
 }
.step-text {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0;
    margin-left: 8px;
    position: absolute;
    top: 14px;
}

参考https://blog.csdn.net/w390058785/article/details/78793560