1、css预处理器
常见的css预处理器有：saas、less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
1、变量：
//less中
@my-selector: banner;
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
//css中
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
2、&父选择器
a {
color: blue;
&:hover {
color: green;
}
}
//css
a {
color: blue;
}
a:hover {
color: green;
}
3、嵌套
// less：
ul {
padding: 0;
li {color: #e4e4e4;}
a {text-decoration: none;}
}
// css：
ul {padding: 0;}
ul li {color: #e4e4e4;}
ul a {text-decoration: none;
2、css3新属性
- 1.新增了更加实用的选择器，例如：动态伪类选择器，目标伪类选择器，伪元素选择器等等。
- 2.新增了更好的视觉效果，例如：圆角，阴影，渐变等。
- 3.新增了丰富的背景效果，例如：支持多个图片背景，同时新增了若干个背景元素的属性。
- 4.新增了全新的布局方案—弹性盒子。
- 5.新增了web字体，可以显示用户电脑上没有安装的字体
- 6.增强了颜色，例如：HSL，HSLA，RGBA几种新的颜色模式，新增opacity属性来控制透明度。
- 7.增加了2D和3D变换，例如：旋转，扭曲，缩放，位移等。
- 8.增加动画和过渡效果，让效果的变换更具流线性，平滑性
3、flex布局
blog.csdn.net/msq6678/art… 弹性盒布局。
它可以简化复杂的布局任务，特别是在需要动态调整元素位置和大小时非常有用。
- flex-direction：决定主轴的方向。
- flex-wrap：如果一条轴线排不下，如何换行。
- flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。
- justify-content：定义项目在主轴上的对齐方式。
- align-items：定义项目在交叉轴上如何对齐。
- align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
一般使用场景是：垂直居中，动态分配空间
垂直居中：
<body style="width: 100%;height: 100%;color: black;">
<div class="a">
<div class="b"></div>
</div>
</body>
<script>
export default {
name: 'Index'
};
</script>
<style lang="less" scoped>
.a{
background-color: aqua;
width: 400;
height: 400;
display: flex;
justify-content: center;
align-items: center;
}
.b{
background-color: brown;
width: 20;
height: 20;
}
</style>
动态分布空间
flex-grow：定义项目的放大比例，如果存在剩余空间，该项目将会按这个比例放大。flex-shrink：定义项目的收缩比例，如果空间不足，该项目将会按这个比例收缩。flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（可以理解为项目初始大小）。
当你设置 flex: 1 时，相当于：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
这意味着该 flex 项目将能够增长以填充容器中的可用空间，并且如果需要的话，也会相应地缩小。它使得 flex 项目非常灵活，可以根据容器的尺寸动态调整自己的大小。
