遇到的样式问题的记录
border 相关
CSS问题-鼠标移入icon时(hover状态),会造成页面内容有上下移动的情况
.icon-radius {
border: 0.5px solid #dde0e1;
&:hover {
border: 0;
}
}
问题:可以发现是因为border的变化,导致该ICON高度宽度发生变化,所以出现了上下移动的问题
解决办法:
- 设置border的颜色,而不是直接让border为0,border-color: transparent;
- 给它的外层元素,该行父元素,添加固定的高度
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;
}