版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Miracle_Gaaral/article/details/86576322
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%;
}