Css

介绍

• 对常用css配置进行收集
• Css是对Html进行装饰
• 如果说Html是骨架那么Css就是衣服。
• 想想一个Cat(猫)没有他的毛发会是啥样。

Css配置🪲

• 每个Vue项目基本必须配置的样式

提示

请使用div进行布局不要element-ui的组件布局！

• 项目默认css配置

html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
    //white-space:pre //允许换行符，可选
}

• 图片完美填充示例

#img{
    background-image: url("https://bbs.deepin.org/-test.png");
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

css动画库😎

• https://animate.style/
• https://greensock.com/showcase/
• https://github.com/airbnb/lottie-web

//npm install lottie-web --save
//下载动画json
lottie.loadAnimation({
    container: element, // html dom 元素
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'data.json' // 你的动画json
});

Flex布局

• 首选必须使用div布局，其他框架标签可能有bug
• 必须如果要固定某元素宽度，不受页面大小变动则必须设定其他元素的具体宽度

示例

• 左sidebar ,右params ,如果右params没有设置 flex: 1; 那么宽度变小时 sidebar 也会变小。

.main{ 
  flex: 1;
  display: flex;
}

.sidebar{
  width: 200px;
  background: cornflowerblue;
}

.params{
  flex: 1;
}