feat(site/blog): migration article

site/blog/app/components/Header.tsx

@@ -31,7 +31,7 @@ const nav = [
     name: "Bizk",
     href: "http://bizk.qhan.wang/",
     icon: (props: any) => (
-      <span {...props} className={clsx("i-ri:tools-line", props.className)} />
+      <span {...props} className={clsx("i-heroicons:wrench-screwdriver", props.className)} />
     ),
   },
   // { name: "Archives", href: "/archives", icon: ArchiveBoxIcon },

site/blog/posts/checkbox-beautify.md

@@ -2,9 +2,9 @@
 title: 表单元素复选框与单选框视觉优化
 date: 2018-03-05 10:58:55
 tags: 
-- CSS
-- Javascript
-category: CSS
+- css
+- js
+category: css
 ---
 
 谈起表单元素在各浏览器上的表现形式，相信各位前端开发者与 UI 设计师都比较头疼，尤其是 checkBox、radio 以及 select 这三种表单元素展现各异。有时候我们为了效率不得不牺牲 UI 效果，那么有什么方法可以在保障效率的情况下，实现功能并达到与 UI 原稿同样的效果呢？相信大家也都或听过，或用过以下两种方法。

site/blog/posts/css-aspect-ratio.md

@@ -0,0 +1,116 @@
+---
+title: CSS之宽高比例布局
+date: 2019-04-08 18:55:00
+tags:
+- css
+category: css
+---
+
+在某些特定的场景中，如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定，那么我们皆大欢喜，但在目前的的应用发展中宽高自适应的方式才能满足我们的需求，那么我们该如何这种自适应的**宽高比布局**呢？
+
+### 什么是宽高比？
+宽高比也称纵横比，元素的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频宽高比为4：3和16：9。要保持div的宽高比，通过为`padding-top`/`padding-bottom`添加一个百分比值。不同的宽高比具有不同的百分比值。或采用视窗单位`vw`/`vh`设置相应高宽。其中一些如下所示：
+| aspect ratio | padding-bottom/top value | vw/vh(width\|height) |
+| ------------ |------------------------- | ------------------- |
+| 16:9         | 56.25%                   | 100vw \| 56.25vw    |
+| 4:3          | 75%                      | 100vw \| 75vw       |
+| 3:2          | 66.66%                   | 100vw \| 66.66vw    |
+| 8:5          | 62.5%                    | 100vw \| 62.5vw     |
+| 2:1          | 50%                      | 100vw \| 50vw       |
+
+
+### 利用padding-top/bottom适配
+在CSS中`margin`与`padding`的百分比值是根据容器的width来计算，利用这一性质我们可以通过设置`padding-top/bottom`的百分比值实现。  采用这种方法，需要把容器的height设置为0，最终容器实际高度由padding撑出。在此基础上又可分为**伪元素**与**内容绝对定位**两种方案。这也是目前最佳的处理方式。具体实现如下：
+
+> Note: 示例均采用2:1的关系
+
+#### 1、伪元素
+> 适用场景：IE8+ 、现代浏览器  
+> 优点: DOM节点少、可响应式、需精确到像素  
+```html
+  <div class="aspect-ration"></div>
+```
+```css
+  .aspect-ration { background-color: #f00; }
+  .aspect-ration::before {
+    content: "";
+    float: left;
+    padding-bottom: 50%;
+  }
+ .aspect-ration::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+```
+
+#### 2、内容绝对定位
+> 适用场景：IE8+ 、现代浏览器
+> 优点: 可响应式、精确到像素 
+```html
+  <div class="aspect-ration">
+    <div class="content"></div>
+  </div>
+```
+```css
+.aspect-ratio {
+  height: 0;
+  overflow: hidden;
+  padding-top: 50%;
+  background: #f00;
+  position: relative;
+}
+.content {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  /* 或者 */
+  /* position: absolute; top: 0; left: 0; width: 100%; height: 100%; */
+}
+```
+
+
+### 视窗单位 vw/vh
+
+利用视窗单位是一种相对于屏幕大小的计算方式，同理我们也也可用用`rem`来达到相同的效果。具体实现与视窗单位一样。
+
+> 适用场景：IE10+ 、现代浏览器  
+> 优点: DOM节点少、可响应式 
+
+```html
+<div class="aspect-ratio"></div>
+```
+#### 1、固定值
+值的计算可参考文章头部表格
+```css
+/* vw */
+.aspect-ratio{ width: 100vw; height: 50vw; }
+
+/*vh */
+.aspect-ratio{ width: 100vh; height: 50vh; }
+```
+#### 2、calc()
+> 利用`calc()`可以动态计算相应值，我们只需要知晓相应比值与高宽中一个值，该方式也可以延用到padding适配中。
+
+```css
+/* vw */
+.aspect-ratio{ width: 100vw; height: calc(100vw * 1 / 2); }
+
+/*vh */
+.aspect-ratio{ width: 100vh; height: calc(100vw * 1 / 2); }
+```
+
+以上两种方法四种实现方式可根据不同场景选用不同的方式。不过有部分情况下采用padding与伪元素的方式相对更佳。
+
+### 结合居中
+在些基础上，我们可能会涉及相关的对宽高比元素进行居中排版，相关细节可参考我上篇文章
+[CSS之居中布局](https://juejin.im/post/6844903742198956040)
+
+### 参考
+[Aspect Ratio Boxes][1]  
+[Maintain the aspect ratio of a div with CSS][2]   
+[Padding][3]  
+[The-padding][4]  
+
+[1]:https://css-tricks.com/aspect-ratio-boxes/
+[2]:https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
+[3]:https://developer.mozilla.org/en-US/docs/Web/CSS/padding
+[4]:https://www.w3.org/TR/css-box-3/#the-padding

site/blog/posts/css-centered.md

@@ -1,77 +1,163 @@
 ---
-title: 元素居中排版
-date: 2017-05-05 10:55:00
+title: CSS元素居中布局
+date: 2018-12-18 10:55:00
 tags:
-- CSS
-category: CSS
----
-
-在前端开发切片布局中我们常常会遇到各种元素 **水平**、**垂直**、**水平垂直**居中显示的的场景，其中 **水平居中** 是相对简单，而 **垂直居中**则相应要麻烦些。
-
+- css
+category: css
 ---
 
+在前端开发中，我们经常会遇到各种上不同场景的关于居中的布局，一般水平居中是相对简单，而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。
 ### 水平居中
+水平居中相对于其它几中居中排列要简单的多，按标签元素可分为行内元素与块级元素居中：
 
-对于行类元素如 span、label、em,small 等元素来说水平居中一般采用方式为：`text-align: center;`，的方式来解决。而块级如：div、main、header、table、section 等元素则采用`margin: auto`;
+#### 1、行内元素
+> 如：`a` `img` `span` `em` `b` `small` 此类标签元素及文本
+
+```css
+    .center { text-align: center; }
+```
+#### 2、块级元素
+> 如：`div` `section` `header` `p`此类标签元素，需要设置宽度
 
-> 注意：不标准做法，块级元素与行内元素可相互转换，因此上述两种方法在块级与行内元素都适用，只是在用时需作适当的转换
+```css
+    .center { margin: 0 auto; }
+```
 
 ### 垂直居中
 
-**适用场景：现代浏览器 IE9+**
+#### 1、line-height
+针对有且仅有一行内容时可行。将line-height值设为相对应高度即可。
 
-**适用场景：IE8+**
+#### 2、vertical-align
+针对行内元素如`img` `span`等元素，其对齐相对于文本基线。达不到完美的垂直居中，不常用。
 
-#### 表格布局法
+#### 3、其它
+关于垂直居中其它方式参考水平垂直居中。
+
+---
 
-#### 行内块法
 
-#### 基于绝对定位的解决方案
+### 水平垂直居中
+在水平垂直居中的场景中，可分为定宽定高、不定宽不定高，按不同应用场景可分如下几种方式，在布局中实际情况而定。
 
-HTML:
+#### 1、Flex方式
+> 适用场景：IE9+、现代浏览器、响应式、不定宽不定高
 
 ```html
-<main>
-  <h1>Center?</h1>
-</mian>
+<section class="center">
+    <div>水平垂直居中</div>
+</section>
 ```
 
-CSS:
-前行条件：元素具有固定的宽度和高度
-适用场景：IE7+
+```css
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+```
+
+#### 2、绝对定位方式
+> 适用场景：IE8+、及现代浏览器、响应式
+
+```html
+<section class="center">
+    水平垂直居中
+</section>
+```
 
 ```css
-main {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -3em; /* 6/2 = 3 */
-  margin-left: -9em; /* 18/2 = 9 */
-  width: 18em;
-  height: 6em;
+.center {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+}
+```
+
+#### 3、绝对定位+transform方式
+> 适用场景：IE9+、及现代浏览器、响应式、不定宽不定高
+
+```html
+<section class="center">
+    水平垂直居中
+</section>
+```
+
+```css
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%)
 }
 ```
 
-当我们采用*CSS3*`calc()`函数时刚可以删掉 margin-top、margin-left 两条属性：前行条件：元素具有固定的宽度和高度
-适用场景：IE9+
+#### 4、绝对定位+calc函数
+> 适用场景：IE9+、及现代浏览器、定宽定高
+
+```html
+<section class="center">
+    水平垂直居中
+</section>
+```
 
 ```css
-main {
+.center {
+  width: 200px;
+  height: 200px;
   position: absolute;
-  top: calc(50% - 3em);
-  left: calc(50% - 9em);
-  width: 18em;
-  height: 6em;
+  top: calc(50% - 100px);
+  left: calc(50% - 100px);
+
+   
 }
 ```
 
-前行条件：元素不定高、定宽（同样适用于定宽、定高）适用场景：IE9+
+#### 5、绝对定位+margin负属性
+> 适用场景：IE6+、及现代浏览器、定宽定高
+
+```html
+<section class="center">
+    水平垂直居中
+</section>
+```
 
 ```css
-main {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    height: 200px;
+    margin-left: -100px;
+    margin-top: -100px;
 }
 ```
+#### 6、Table-cell方式
+> 适用场景：IE8+、及现代浏览器、不定宽不定高
+
+```html
+<div class="table">
+  <div class="table-cell">
+    <div class="center-content">
+      水垂直居中
+    </div>
+  </div>
+</div>
+```
+
+```css
+.table{ display: table; }
+.table-cell {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+.center-content{
+  width: 50%;
+  margin: 0 auto;
+}
+```

site/blog/posts/css3-nth-child.md → site/blog/posts/css-nth-child.md

@@ -1,9 +1,9 @@
 ---
-title: CSS3选择器之nth-child
+title: CSS选择器之nth-child
 date: 2016-05-05 10:58:55
 tags: 
-- CSS
-category: CSS
+- css
+category: css
 ---
 
 在我们对一组相同元素作不同表现形式的操作时，在还没有选择器`:nth-child`与`:nth-of-type`时，我们常用到的方法可能是利用 JS 来控制表现形式，或者采用 CSS 选择器类处理这类问题。

site/blog/posts/cursor-position.md

@@ -1,10 +1,9 @@
 ---
 title: "文本域光标定位"
 date: "2018-06-10"
-category: Javascript
+category: js
 tags:
-- Javascript
-- HTML
+- js
 ---
 
 在应用中某些场景下，我们会涉及到对表单元素`input`与`textarea`或者是带有属性`contenteditable="true"`的元素，设置自动获取焦点。在这些元素没有内容的情况下那么设置焦点非常容易，然而现实情况往往总是与众不同。那么在遇到这些需求我们该如何做呢？

site/blog/posts/custom-css-scrollbar.md

@@ -2,11 +2,9 @@
 title: CSS3自主义浏览器滚动条
 date: 2017-05-05 10:58:00
 tags:
-- CSS
-- CSS3
-- JavaScript
-- Plugs
-category: CSS
+- css
+- js
+category: css
 ---
 
 由于平台不同，或用户采用的浏览器不同，或因同浏览器版本不同，都或多或少存在一定的差别，造成与 UI 设计图有一定的差别，影响用户视觉体验。那么目前这类问题常采用的方法都有那些嗯？