css-sass | 木子吻雨叚

# css-sass

# rem和em的区别

rem和em是相对单位，可以解决移动端适配问题，都相对font-size来确定

区别：
em是针对与父元素的font-size，若父元素没有font-size，依次向上寻找，直到根元素html
rem是针对与根元素html的font-size\

chorme默认的字体大小是16px，也就是html的font-size是16px，2rem=32px；

html{
    font-size:200px;/* chorme 默认 16px */
}

div{
    width:2rem;/* 400px */
    height:1em;/* 200px */
    border: 1px solid red;
    font-size:50px;/*设置后，子元素em单位依据该font-size设置大小*/
}

div .box{
    width:2em;/* 依据父元素div的font-size设置2em=100px */
    height:1em;/* 100px*/
    border: 1px solid green;
}

div .box .con{
    width: 2rem;/* 依据根元素html设置大小为400px */
    height: 2em;/* 若父级.box没有font-size，依次向上继承font-size设置大小，直到根元素结束，依据div的font-size设置2em=100px */
    border: 1px solid blue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 水平垂直居中对齐

vuex无法获取getters属性this.$store.getters.getCurChildId undefined 这是因为我们设置了命名空间namespaced: true,

const store = new Vuex.Store({
    namespaced: true,//添加
    state,
    mutations,
    actions,
    getters,
    modules: {
        leftTree,
    }
});

1
2
3
4
5
6
7
8
9
10

// router.js
import store from '../store'
store.getters['userAllInfo/menuList']  //不可行，还是undefined
store.state.userAllInfo //函数
store.state.userAllInfo.menuList //不可行，undefined

1
2
3
4
5


let linkPath = this.$util.formatMenuAndPerm.call(this, this.menuList);
               const { href } = this.$router.resolve({
                   path: linkPath
               });
               window.open(href, "yw")


let linkPath = this.$util.formatMenuAndPerm.call(this, this.baseMenuList);
     const { href } = this.$router.resolve({
       path: linkPath
     });
     window.open(href,"base")

// open窗口，没有新开窗口，有就返回原窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15