前端的一些布局、颜色等技巧

一、当前页面铺满整个屏幕

这个只需要设置占据整个页面容器的高为100vh，1vh是当前屏幕高度的1%，宽为100vw，1vw是当前屏幕宽度的1%，页面的body的margin为0就行了。需要注意的是style中有没有限制样式的范围scoped，App.vue只是一个组件，限制样式的话最后渲染出来的body还是会有8px的margin。

body{
    margin: 0;
}
.最大容器类名{
    width: 100vw;
    height: 100vh;
}

二、flex布局

display:flex就是将盒子设置成一个弹性盒子，弹性布局属性，还可以赋值block块级、inline行内等属性。当我们将盒子设置成flex后，子元素的float、clear和vertical-align属性将会失效。

flex-direction是设置主轴方向，默认主轴x轴水平向右，侧轴y轴垂直向下，子元素是跟着主轴来排列的。有四个属性值：row（默认值），主轴水平方向，从左向右；row-reserve，主轴水平方向，从右向左；column，主轴垂直方向，从上到下；column-reserve，主轴垂直方向，从下到上。

justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，有多个属性。

align-items和 justify-content 类似，align-items 属性用来设置项目在侧轴方向上的对齐方式。1）. flex-start 沿着侧轴方向 起点 对齐（默认值）。2）. flex-end 沿着侧轴方向 结尾 对齐。3）. center 沿着侧轴方向 居中 对齐。4）. baseline 沿着侧轴方向，按照项目内的文字对齐。5）. stretch 沿着侧轴方向自动进行拉升到最大。 

注：弹性盒子的宽高可以让盒子里面的元素撑开，宽高撑开不会超过父元素盒子的宽高。弹性盒子还可以自己给其设置宽高的值。

1、设置盒子中的元素沿着y轴从上到下排列，且元素垂直居中。

.类名{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

2、设置盒子中的元素两端对齐

.类名{
    display: flex;
    justify-content: space-between;
}

三、只用css给背景色加渐变效果

.blogFooter{
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(125deg,#27ae60,#2980b9,#e74c3c,#8e44ad);
    background-size: 500%;
    animation: move 10s infinite;
}
@keyframes move{
            0%{
                background-position: 0% 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
}

渐变原理：linear-gradient是css的一个渐变函数（background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction是用角度值指定渐变方向，后面的值用来指定渐变的起止颜色）。这样这个背景就会有一个渐变效果，但是静态的。再使用background-size将背景色放大五倍，溢出来的部分会被隐藏。最后再加个动画效果animation：动画名 动画时间 无限循环。下面定义动画0%、50%、100%三个状态时背景的位置，以此实现动态渐变。

四、层叠布局

这里会用到z-index属性，一个页面并不是一个二维的平面，而是三维的，有一个z轴。使用z-index属性的步骤如下：1） 首先，将要设置z-index的元素的position属性值设置为absolute、fixed或relative（当一个元素的位置确定的时候，没设置也能用）。2）设置z-index属性值。处于一个盒子中看哪个z-index属性值大，大的在上面，处于两个盒子中时，看父元素盒子哪个z-index属性值大，大的在上面。

五、width:100%溢出盒子

当我们的盒子宽度设置为100%时，宽度就是父元素的宽度。这是如果给盒子加上一个外边距或内边距，这个盒子就会溢出来。第一个解决方法就是将盒子宽度改小一点，第二个如果是内边距导致的溢出可以将盒子box-sizing设置为border-box。

六、块级盒子里面的元素水平垂直居中

这里需要使用盒子的positon属性，通过定位来实现水平垂直居中。盒子设置position: relative，盒子内的元素设置position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%)。

.盒子类名{
    position: relative;
}
.盒子内的元素类名{
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}