GoodCss记录

图标四角反转：

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

> @keyframes animationname {keyframes-selector {css-styles;}}
>

• animationname 必需。定义动画的名称。
• keyframes-selector 必需。动画时长的百分比。合法的值：
  • 0-100%
  • from（与 0% 相同）
  • to（与 100% 相同）
• css-styles: 必需。一个或多个合法的 CSS 样式属性。

@keyframes flip {
	0% {
		transform: rotateY(0);
	}

	25% {
		transform: rotateY(180deg);
	}

	50% {
		transform: rotateY(180deg) rotateX(180deg);
	}

	75% {
		transform: rotateY(360deg) rotateX(180deg);
	}

	100% {
		transform: rotateY(360deg) rotateX(360deg);
	}
}

[v-cloak] .logo {
	position: relative;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	background-color: hsl(241, 99%, 70%);
	border-radius: 50%;
	animation: 2s flip infinite;
}

注： 采用animation需要将position设置为relative

方形变圆形：

width: 3rem;
height: 3rem;border-radius: 50%;

元素在容器中正居中——Flex

[v-cloak] .placeholder {
	display: flex;					// flex布局
	flex-direction: column;		    // 元素堆叠方向, 这个无所谓, 主要的是下面两个
	align-items: center;			// 水平居中
	justify-content: center;		// 垂直居中
	width: 100%;
	height: 100%;
}

放置项居中

.test{
    height: 80vh;					// 找到个居中的高度
    weight: 100%;					
    display: grid;				
    place-items: center center;		 // 水平居中
}

from: https://www.bilibili.com/video/BV1Zr4y1r7bx

选择器

:after 选择器向选定元素的最后子元素后面插入内容。使用content 属性来指定要插入的内容。

• ::after针对所有元素的:after

• p:after
  {
  	content:"- 台词";
  }
  
  <p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE。</p>

:selection：针对被选择后

• ::selection {
    background: rgba(var.$color-text, 0.15);		// hsl为拾色器
  }

布局

BOX

传统布局基于盒状模型，依赖 display 属性 + position属性 + float属性。

它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器的属性:

• flex-direction: flex-direction属性决定主轴的方向（即项目的排列方向）。
  • flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
  • nowrap | wrap | wrap-reverse;
• flex-flow
• justify-content: 定义了项目在主轴上的对齐方式。
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
• align-items: 定义项目在交叉轴上如何对齐。
  • align-items: flex-start | flex-end | center | baseline | stretch;
• align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性

• order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间大小（main size）
• flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
  • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  • 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
• ▲align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

项目布局经典样例

vue、Layout 布局、Layout 属性事件、vue Layout 全部布局、vue Layout 全部属性事件

组件库

Vue2

• muse-ui

Vue3

• 引入 Antd for Vue3 版本组件库
  • Antdv2.x是唐金州老师（杭州校宝在线）研发的新一代适配 Vue 3.0 的组件库，我们来尝尝鲜，这边我们通过如下命令后下载：
• elementUI： 饿了么的vue组件库->Vue2
• LayoutUI: 使用jquery实现的组件库
• elementPlus: 饿了么的vue组件库->Vue3
• Bootstrap-Vue UI组件库: Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现
• Ant Design Vue UI组件库: Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
• iView： 一套基于 Vue.js 的高质量UI 组件库
• Naive UI
• Radon UI： 一个帮助你快速开发产品的Vue组件库，简洁好用，效率高，让你摆脱各种定制化的烦恼。
• Vue Antd：这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
  Vuetify: Vuetify是一个渐进式的框架，试图推动前端开发发展到一个新的水平。Vuetify 支持SSR（服务端渲染），SPA（单页应用程序），PWA（渐进式Web应用程序）和标准HTML页面。

移动端：

• Vant UI组件库: Vant是一个轻量、可靠的移动端 Vue 组件库。
• Mint UI组件库: Mint UI基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。

小程序：

• mpvue 框架
• iview UI
• vanz UI

Vue结合TailwindCss(css框架)

1. 安装yarn add tailwindcss@1.4.6

2. 在 src/assets 新建 css 文件夹，并新建 tailwind.css (文件名随便，下面保持一致即可)

3. 在 tailwind.css 文件中，添加如下内容:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. main.js引入import “./assets/css/tailwind.css”

   import "./assets/css/tailwind.css"
   or 
   import "@/assets/css/tailwind.css"

5. 创建 Tailwind 配置文件(使用默认即可): npx tailwind init or npx tailwind init --full

6. 新建 postcss.config.js 文件

   const purgecss = require('@fullhuman/postcss-purgecss')({
       content: [
         './src/**/*.html',
         './src/**/*.vue',
         './src/**/*.jsx',
       ],
    
       // Include any special characters you're using in this regular expression
       defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
     })
    
   module.exports = {
       plugins: [
         require('tailwindcss'),
         require('autoprefixer'),
         ...process.env.NODE_ENV === 'production'
         ? [purgecss]
         : []
       ]
     }

项目导航栏

<template>
	// 先将组件用一个div作为容器固定起来, 并设置为relative, 之后就可以通过absolute进行定位了
    <div class="container">
        <n-layout position="absolute">
            <Header class="header" :inverted="inverted" @toggleInverd="toggleInverd" />
            <n-layout has-sider position="absolute" class="content">
                <Sidebar :inverted="inverted" />
                <n-layout content-style="padding: 24px;">
                    <Breadcrumb />
                    <n-message-provider>
                        <router-view></router-view>
                    </n-message-provider>
                </n-layout>
            </n-layout>
        </n-layout>
    </div>
</template>

<script>
    import {
        defineComponent,
        ref
    } from "vue";
    import Sidebar from "../components/Sider/index.vue";
    import Header from "../components/Header/index.vue";
    import Breadcrumb from "./Breadcrumb/index.vue";

    export default defineComponent({
        name: "App",
        components: {
            Sidebar,
            Header,
            Breadcrumb
        },
        setup() {
            let inverted = ref(false);

            const toggleInverd = (value) => {
                inverted.value = value;
            };

            return {
                inverted,
                toggleInverd,
            };
        },
    });
</script>

<style lang="scss">
    .container {
        position: relative;
        height: 100vh;

        .header {
            height: 60px;
        }

        .content {
            min-height: calc(100vh - 56px);
            top: 56px;
            bottom: 56px;
        }
    }
</style>