CSS

Posted on Edited on

vue中css文件引入

import "./normalize.css"

CSS中的变量

  1. :root获取根元素html

  2. 定义变量

    1
    2
    3
    :root{
        --color-text: #666
    }

  3. 使用变量

    1
    2
    3
    div{
        color: var(--color-text)
    }

用在设置多个相同颜色的时候很方便:D

position: sticky

使用该属性的时候要设置top属性

当该元素小于这个高度时正常滚动，当该元素大于这个高度时会被固定在这个高度

好用的属性一般不兼容 :(

神奇属性在哪里

1
2
3
4
5
6
7
8
9
div{
    display: flex;
    flex-wrap: wrap; /*去掉会让所有的子元素排列在一排不会换行噢*/
    justify-content: space-evenly;
}

div>div{
    width:47%;
}

可以做到div里面的div元素flex布局，而且一行刚好两个（通过调整子元素的宽度可以决定一行里面有多少个子元素），再通过justify-content属性可以让它们之间的间隙各种等分！间隙等分，子元素等分都有，建议实践出真知，真的超级神奇