Music app

仿网易云APP

总结一路遇到的问题。

css

• display :inline-block 有空隙，添加 vertical-align:top解决
• 做出比1px更细的border

//解决方案：
.page > .topBar > a:after{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 200%;
    height: 200%;
    border-radius: 30px;
    border: 1px solid white;
    transform-origin: 0 0 ; //以 0 0 坐标变换
    transform: scale(0.5);
}

• line-height:1默认和字一样高
• 多行文字溢出省略

overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数
    -webkit-box-orient: vertical;

• svg 变色用 fill属性
• 阻止margin 合并

.noCollapse::before {
    content: '';
    display: table;
}

.noCollapse::after {
    content: '';
    display: table;
}

• 背景模糊/变暗

filter: blur(20px) brightness(0.5);

• 动画

当自身的css带transform的时候, 动画的transform也要加上自带的transform

@keyframes spin {
    0%{
        transform: translate(-50%,-50%) rotateZ(0deg);
    }
    100%{
        transform: translate(-50%,-50%) rotateZ(360deg);
    }

• 绝对定位居中

position:relative;
top:50%;
left:50;
transform:translate(-50%,-50%)

• 获取伪元素的值

  获取伪元素的属性值可以使用window.getComputedStyle()方法，获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

语法：window.getComputedStyle(element[, pseudoElement])

// CSS代码
#myId:before {
    content: "hello world!";
    display: block;
    width: 100px;
    height: 100px;
    background: red;
}

// HTML代码
<div id="myId"></div>

// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

• background-size 中cover 和contain的区别

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；