VUE----基本css知识

flex:  弹性布局

父容器: display: flex

子容器:  flex: 1   --------------自动伸缩填充

               flex: 0 0 40px      -------不伸缩,指定宽度

https://www.runoob.com/w3cnote/flex-grammar.html

 

box-shadow: 0, 8px, 8px, rgba(0, 0, 0, .5)     添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;

 

transition过渡动画:   注意transform和transition的区别

1.用transition包裹div, 并命名name="xxx";

2.在div对应的类写过渡动画代码

&.xxx-enter, &.xxx-leave-to {
  transform: translate3d(0, -100%, 0)
}
&.xxx-enter-to, &.xxx-leave {
  transform: translate3d(0, 0, 0)
}
&.xxx-enter-active, &xxx-leave-active {
  transition: all .3s linear
}

 

伪类选择器

表示容器中的第一个子元素

&:first-child{

}

表示容器中的最后一个子元素

&:last-child{

}

 

border-radio: 50%  定义好长宽后画圆

 

DIV+CSS让背景图片自动缩放

body {
  background: url("./../img/bg.jpg") fixed center center no-repeat;
  background-size: cover;
  width: 100%;
}