-
CSS整理
目录
flex-basis：初始值，项目占据的主轴空间（main size）
vue router 中的 router-link-exact-active 、router-link-active和 active-class
border-spacing: 0; border-collapse:collapse;
width: 0.5em; display: inline-block;
background: url(xxx.png) no-repeat center / contain;
汇总一些遇到的css。
CSS中的&代表的什么
如源码:
ul{
margin-bottom: 20px;&>li { margin-bottom: 0;}
}&表示嵌套的上一级
这是sass的语法，代表上一级选择器解释成CSS代码如下
ul{margin-bottom: 20px;} ul > li {margin-bottom: O;}扩展和收缩flex容器内的元素。
（注：给父盒子设为flex布局后，子元素的 float、clear、vertical-align 属性将失效，来控制子盒子的位置和排列方式。）
flex布局 父项常见属性：
- flex-direction（设置 主轴方向）、
- justify-content（左右对齐方式，x轴方向，即 主轴子元素的排列方式）、
- align-items（垂直对齐方式，y轴方向，即 侧轴子元素的排列方式，单行）、
- align-content（侧轴上子元素的排列方式，多行）、
- flex-flow（复合属性，同时设置 flex-direction 和 flex-wrap）、
- flex-wrap（设置子元素是否换行）
flex主轴方向
-
flex-direction
定义主轴的方向（即 项目的排列方式。设置谁为主轴，剩下的为侧轴，子元素根据主轴来排序）。
- flex-direction: row | row-reverse | column | column-reverse;
- // （从左到右）默认值 从右到左 从上到下 从下到上
flex的对齐方式
个人理解，justify-content 是 x 轴上的对齐方式，align-items 是 y 轴上的对齐方式。
-
justify-content
项目在主轴上的对齐方式。
- justify-content: flex-start | flex-end | center | space-between | space-around;
- // （左对齐）默认值 右对齐 居中 两端对齐 两侧间隔相等
-
align-items
项目在交叉轴上的对齐方式。
- align-items: flex-start | flex-end | center | baseline | stretch;
- // 起点对齐 终点对齐 中点对齐 第一行基线对齐 无高/高为auto，占满整个容器高度
-
align-self
flex子项在侧轴（纵轴）上的对齐方式。
- align-self: auto | center |stretch |flex-start|flex-end|baseline|initial|inherit;
- //（继承父容器）默认值 居中 被拉伸 开头/左对齐 结尾/右对齐 基线 默认值 从父元素继承
-
align-content
各项没有占用交叉轴（y轴）上所有可用的空间时 对齐容器内的各项（垂直），即
使用justify-content 属性对齐主轴上的各项（水平）
注： 要多行才可渲染出效果
- align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
- // 默认值
flex-wrap 弹性盒换行
- flex-wrap: nowrap | wrap
- // （默认值）不换行 换行
- //默认值 不换行 nowrap
- //换行 wrap
flex:1
flex:1，表示flex-grow:1，用于自适应布局中，其父容器display:flex，当侧边栏大小固定后，将内容区flex:1，内容区会自动放大占满剩余空间。
flex属性
flex属性 是flex-grow、flex-shrink、flex-basis三个属性的简写。
-
flex-grow：项目的放大比例
默认为0， 即 即使存在剩余空间，也不放大
所有项目的flex-grow为1：等分剩余空间（自动放大占位）
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍
-
flex-shrink：收缩
默认为1， 即 如果空间不足，该项目将缩小；
所有项目的flex-shrink为1：空间不足时，缩小比例相同；
flex-shrink为0：空间不足时，项目不会缩小；
flex-shrink为n的项目，空间不足时 缩小的比例是flex-shrink为1的n倍。
-
flex-basis：初始值，项目占据的主轴空间（main size）
默认值为auto，即 项目原本大小；
设置后将占据固定空间
flex的默认简写
MDN中给到的一些默认简写
Vue中的style的lang=''和scpoed
普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性
scoped属性，是种特殊属性（布尔值），表示 当前style的样式只属于当前模块。（作用域、私有化的思想）。scoped属性是指定样式的局部作用域。
思想：让当前组件的样式不会修改到其他地方的样式，用了data-v-hash的方式使得css有了对应的模块标识。
----> 样式隔离，自身样式不会影响到其他组件，即 父组件样式不会渗透到子组件中。
★ 在vue中: App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。
----> vue中，用于修改CSS选择器的作用域
----> scoped样式中的选择器作用得”深“，如 影响其子组件
通常vue为了让单页的样式不会污染全局，会加上scoped属性，将导致无法替换掉组建的样式。则可以使用 ::v-deep 把样式跑出去替换到全局的，即 选择器::v-deep 。
使用CSS预处理器，如scss，可以用 :deep() ，即 选择器:deep()
- ::v-deep 是一个特殊的深度作用选择器，仅用于scoped样式中，应用于当前组件及其子组件。仅对该组件的样式生效。例如，.foo::v-deep .bar 会选择包含class为"bar"的元素的所有嵌套层次结构，但仅对 .foo组件的样式生效。vue3的格式 ::v-deep(选择器1)
- :deep() 是一个伪类选择器，更通用，适用于全局样式和嵌套组件中的样式，应用于当前组件及其子组件。例如，.foo :deep(.bar)会选择包含class为"bar"的元素的所有嵌套层次结构。格式： 选择器1 :deep(选择器2)
- >>>操作符，是::v-deep 和 /deep/ 的别名，用于css中，部分scss的预处理器无法正确解析>>>，css中 使用格式 选择器1 >>>选择器2 {}。
- /deep/，是::v-deep的别名，用于css的预处理器（less，sass，scss）中，vue-cli3编译时，其可能会报错/警告，最好使用::v-deep 更保险且编译更快。
----> 样式穿透：使用第三方库，由于scoped的影响直接编写同名样式，覆盖不了组件内的样式，可以进行样式穿透。
- ::v-deep，直接取消选择器中的属性选择器，则能匹配到子组件的内部标签，有时可以结合 !important 使用
- style标签，子组件中用scoped属性进行样式隔离，若不希望样式隔离，可以再写一个style标签，不加scoped属性，即可对其他组件的样式造成影响，使用时要注意。
注：当前 vue3 不支持最新版的sass，可以使用相应版本的node-sass 和sass-loader
npm install node-sass@^4.14.1 -D
npm install sass-loader@^7.3.1 -D
CSS预处理语言有SCSS(SASS.)和LESS等等，是用来实现样式。
lang的属性可选:scss (sass) . less等等 即: