# Tips

# 实现水平垂直居中

1. flex 布局（常用）

/* 在需要居中的元素的父元素上写 css 居中样式 */

.parent {

  display: flex;

  justify-content: center;

  align-items: center;

}

2. grid 布局（更简洁）

   grid 是二维布局特化的属性，只做居中布局其实一维的 flex 就够用了

.parent {

  display: grid;

  place-items: center;

}

3. translate 偏移居中（绝对定位中最好用的方法，不定宽高）

.parent {

  position: relative;

}

.child {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

4. flex 实现特定比例排成一排（如 1:2:1）

.parent {

  display: flex;

  .child_left {

    flex: 1;

  }

  .child_center {

    flex: 2;

  }

  .child_right {

    flex: 1;

  }

}

# 适配问题

# 图片居中

1. 利用背景实现：

background: url(...) no-repeat center center;

background-size: contain;

2. 更优方案：

/* 有多个属性值可选，这里只举了 `contain`（等比缩放居中）的例子，常用的还有 `cover`（等比填充居中） */

object-fit: contain;

# 隐藏元素的方法

• display: none ：结构消失，触发回流重绘
• visibility: hidden ：结构保留，占据空间，触发重绘，不可选中
• opacity: 0 ：占据空间，不回流不重绘，可以被选中
• position: absolute/fixed; left/top:-9999px; ：利用绝对定位，设置超大负边距将元素抛出视图，脱离文档流所以不占据空间
• transform: translate(-9999px) ：利用偏移抛出视图，空间会占据（注意：行内元素无效）
• transform: scale(0) / transform: skew(90deg) ：变形来达到隐藏效果（注意：行内元素无效）
• clip-path: circle(0px) ：利用裁剪创建元素的可显示区域，区域外会隐藏，占据空间，不可选中（这里我用 circle 是因为它参数最少）
• z-index ：层叠上下文有可能盖住，也是一种隐藏方式
• content-visibility: hidden ：只能设置内容隐藏，设置的元素本身不受影响。隐藏效果类似方法 1，隐藏原理是基于浏览器渲染的，性能上有优势
• height: 0 ：根据盒模型原理，需要额外代码处理，还需隐藏子元素

# 常见问题

• 图片不能自动撑满怎么解决？

display：block; // 把 img 设置为块元素，解决

• Li 与 li（或行内块元素）之间看不见的空白间隔怎么产生的？

设置 font-size: 0; // 是受空格影响的，display: inline-block 也会产生间隔

• CSS 绘制三角形原理？

  利用边框（border）属性实现，div 宽高设为 0，然后设置不同方向的三条边颜色为透明，剩下的边就是三角形。通过变换 border 宽度调整大小形状，变换剩下那条边的颜色改变三角形颜色

width: 0;

height: 0;

border: 50px solid transparent;

border-top: 50px solid blue;

# Vue3 集成 Tailwind CSS

[Tailwind CSS] 是一个由 js 编写的 CSS 框架 他是基于 postCss 去解析的

对于 PostCSS 的插件使用，我们再使用的过程中一般都需要如下步骤：

1. PostCSS 配置文件 postcss.config.js，新增 tailwindcss 插件。
2. TaiWindCss 插件需要一份配置文件，比如:tailwind.config.js。

• postCss 功能介绍

1. 增强代码的可读性 （利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。）

2. 将未来的 CSS 特性带到今天！（PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。）

3. 终结全局 CSS（CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。）

4. 避免 CSS 代码中的错误（通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。）

• postCss 处理 tailWind Css 大致流程

1. 将 CSS 解析成抽象语法树 (AST 树)
2. 读取插件配置，根据配置文件，生成新的抽象语法树
3. 将 AST 树” 传递” 给一系列数据转换操作处理（变量数据循环生成，切套类名循环等）
4. 清除一系列操作留下的数据痕迹
5. 将处理完毕的 AST 树重新转换成字符串

• 安装

1. 安装 Tailwind 以及其它依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 生成配置文件

npx tailwindcss init -p

3. 修改配置文件 tailwind.config.js
   2.6 版本:

module.exports = {

  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

3.0 版本:

module.exports = {

  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

4. 创建一个 index.css, 在 main.ts 引入
   index.css:

@tailwind base;

@tailwind components;

@tailwind utilities;

main.ts:

import "./index.css";

5. 最后 npm run dev 就可以使用啦

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">

  <div class="md:flex">

    <div class="md:flex-shrink-0">

      <img class="h-48 w-full object-cover md:w-48" src="http://n.sinaimg.cn/translate/20170815/OoVn-fyixtym5144510.jpg" alt="Man looking at item at a store" />

    </div>

    <div class="p-8">

      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>

      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>

      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>

    </div>

  </div>

</div>

# unocss 原子化

• 什么是 css 原子化？
  CSS 原子化的优缺点:

1. 减少了 css 体积，提高了 css 复用

2. 减少起名的复杂度

3. 增加了记忆成本 将 css 拆分为原子之后，你势必要记住一些 class 才能书写，哪怕 tailwindcss 提供了完善的工具链，你写 background，也要记住开头是 bg

• 接入 unocss
  (tips：最好用于 vite ,webpack 属于阉割版功能很少)

1. 安装

pnpm add -D unocss

或者：安装 unocss 和三个预设，第一个是工具类预设，第二个是属性化模式支持，第三个是 icon 支持

pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

2. 配置 vite.config.ts

import unocss from 'unocss/vite'

import { presetUno, presetAttributify, presetIcons } from 'unocss'

 plugins: [vue(), vueJsx(),unocss({

      presets: [

        presetUno(),

        presetAttributify(),

        presetIcons()],

      rules:[

      ]

  })],

3. main.ts 引入

import "uno.css";

4. 使用

<div class="text-25px text-#ff6700 bg-#ccc">你好Unocss</div>

<!-- text-25px: font-size:25px

text-#ff6700: color: #ff6700

bg-#ccc: background: #ccc

使用 class 类名来描述样式，省去了单独写 style 的样式 -->

• 配置静态 css

rules: [["flex", { display: "flex" }]];

• unocss 预设

presets: [presetIcons(), presetAttributify(), presetUno()];

1. presetIcons Icon 图标预设
   图标集合安装

pnpm add -D @iconify-json/ic

首先我们去 icones 官网（方便浏览和使用 iconify）浏览我们需要的 icon，比如这里我用到了 Google Material Icons 图标集里面的 baseline-add-circle 图标

<div class="i-ic-baseline-backspace text-3xl bg-green-500" />

2. presetAttributify 属性化模式支持
   属性语义化 无须 class

<div font="black">btn</div>

3. presetUno 工具类预设
   默认的 @unocss/preset-uno 预设（实验阶段）是一系列流行的原子化框架的 通用超集，包括了 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等。

例如，ml-3（Tailwind），ms-2（Bootstrap），ma4（Tachyons），mt-10px（Windi CSS）均会生效。