安装Postcss解决webstorm嵌套css报错

css样式优先级

优先级设置为最高则优先执行此语句,不会受到js更改样式而更改

1
2
3
4
5
6
条件后加上!important

// 示例
.manager_tag:hover {  
  background: #91c1ff !important;  
}

旋转效果

1
transform: rotate(30deg)

此处意味顺时针旋转30°

transform其他属性

1
2
3
4
5
6
7
8
// 以X轴旋转
rotateX(angle)
// 以Y轴旋转
rotateY(angle)
// 以Z轴旋转
rotateZ(angle)
// 代表沿着(0,0,0)->(x,y,z)这条线旋转
roate3D(x,y,z,angle)

更改旋转中心

1
transform-origin: 当前元素左边距 当前元素上边距;

布局

绝对定位相对于父元素

父元素使用相对定位position: relative属性,子元素使用绝对定位position: absolute即可实现子元素的绝对定位是相对于父元素进行的

响应式布局

1
2
3
4
5
6
7
@media screen and (min-width: 922px) and (max-width:1199px) {
    .container {
        width: 933px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

div内img底部留白问题

原因

图片的display属性的默认值是lnline

解决方法

为图片加上display: block即可

模糊

高斯模糊

1
filter: blur(10px);

a标签下划线(router-link)

vue中router-link本身也是a标签,所以也适用

1
text-decoration: none;

filter(滤镜属性)

更改灰度

1
filter: grayscale(100%);

选择子元素

1
2
:nth-child(2)
此处为选择第二个