### 背景 最近业务需求上要求对表格加入拖拽排序功能，由于我们UI组件库基于[antd][1]，根据组件库官方文档给出的基于[react-dnd][3]、[react-sortable-hoc][4]示例，与我们自身业务需求的调研，最后选择[react-sortable-hoc][4]库作为接入拖拽排序接入。在查阅该库相关文档的过程中其作者明确定不再积极维护，并强烈建议采用[dnd-kit][2]替换。本着~~学习的态度~~一步到位想法（偷懒)，因此最终决定直接使用[dnd-kit][2]库来实现拖拽排序功能。

在某些特定的场景中，如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定，那么我们皆大欢喜，但在目前的的应用发展中宽高自适应的方式才能满足我们的需求，那么我们该如何这种自适应的**宽高比布局**呢？ ### 什么是宽高比？ 宽高比也称纵横比，元素的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频宽高比为4：3和16：9。要保持div的宽高比，通过为`padding-top`/`padding-bottom`添加一个百分比值。不同的宽高比具有不同的百分比值。或采用视窗单位`vw`/`vh`设置相应高宽。其中一些如下所示： | aspect ratio | padding-bottom/top value | vw/vh(width\|height) | |

在前端开发中，我们经常会遇到各种上不同场景的关于居中的布局，一般水平居中是相对简单，而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。 ### 水平居中 水平居中相对于其它几中居中排列要简单的多，按标签元素可分为行内元素与块级元素居中： #### 1、行内元素 > 如：`a` `img` `span` `em` `b` `small` 此类标签元素及文本 ```css .center { text-align: center; } ``` #### 2、块级元素 > 如：`div` `section` `header` `p`此类标签元素，需要设置宽度 ```css .center { margin: 0 auto; } ``` ### 垂直居中 #### 1、line-height 针对有且仅有一行内容时可行。将line-height值设为相对应高度即可。 #### 2、vertical-align 针对行内元素如`img` `span`等元素，其对齐相对于文本基线。达不到完美的垂直居中，不常用。 #### 3、其它 关于垂直居中其它方式参考水平垂直居中。

每个组件都有几个“生命周期方法”，您可以覆盖这些方法以在流程中的特定时间运行代码。您可以将此生命周期图用作备忘单。在下面的列表中，常用的生命周期方法被标记为粗体。它们中的其余部分存在于相对罕见的用例中。

在应用中某些场景下，我们会涉及到对表单元素`input`与`textarea`或者是带有属性`contenteditable="true"`的元素，设置自动获取焦点。在这些元素没有内容的情况下那么设置焦点非常容易，然而现实情况往往总是与众不同。那么在遇到这些需求我们该如何做呢？

利用CANVAS生成缩略图方法总结

谈起表单元素在各浏览器上的表现形式，相信各位前端开发者与 UI 设计师都比较头疼，尤其是 checkBox、radio 以及 select 这三种表单元素展现各异。有时候我们为了效率不得不牺牲 UI 效果，那么有什么方法可以在保障效率的情况下，实现功能并达到与 UI 原稿同样的效果呢？相信大家也都或听过，或用过以下两种方法。

由于平台不同，或用户采用的浏览器不同，或因同浏览器版本不同，都或多或少存在一定的差别，造成与 UI 设计图有一定的差别，影响用户视觉体验。那么目前这类问题常采用的方法都有那些嗯？

在我们对一组相同元素作不同表现形式的操作时，在还没有选择器`:nth-child`与`:nth-of-type`时，我们常用到的方法可能是利用 JS 来控制表现形式，或者采用 CSS 选择器类处理这类问题。 我们需要在 HTML 中加入一些类属性，如果数量非常大时，又或者我们只给奇数或偶数或其它规则的元素定义不同样式呢，这样我们代码就非常不容易维护，或许你会说通过 JS 脚本就容易多了，但是脚本它也是通过改变元素节点的 style 属性或类属性来达到需要的。相对来说，当数据量大了时，都不太容易维护。 以 CSS 类选择器示例，如下： ```html <ul class="example"> <li class="example-red">Red.</li> <li class="example-orange">Orange.</li> <li class="example-yellow">Yellow.</li> <li class="example-green">Green.</li> <li class="example-blue">Blue.</li> </ul> ``` ```css .example { } .example-red { color: red; } .example-orange { color: orange; } .example-yellow { color: yellow; } .example-green { color: green; } .example-blue { color: blue; } ``` 从上面例子我们已经看出，html 与 css 相对已经变得复杂。所幸现在我们可以用 CSS3 子选择器:nth-child 与:nth-of-type 来实现这类需求。

以下正则表达式均从各博客收集整理得来，目前还未作测试，请谨慎使用，若有错误麻烦各位及时反馈给我！ 联系方式：[whenhan@foxmail.com](mailto:whenhan@foxmail.com) ### 正则工具 * [regexbuddy](//www.regexbuddy.com/) * [WEB 前端助手（FeHelper）](//www.baidufe.com/fehelper)