本文共 1335 字，大约阅读时间需要 4 分钟。

1、鼠标移上去变成手型、禁用

手型：在元素的style属性中添加 cursor:pointer 即可

禁用：在元素的style属性中添加 cursor:no-drop或者 cursor:not-allowed 即可

2、样式绑定

:style="index % 2 == 0 ? 'margin-right:20px' : ''"

3、字符间距

letter-spacing来设置字与字间距_字符间距离，字体间距css样式

4、VUE双击事件

5、平均分配

display: flex;align-items: center;

编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

6、自动计算高度

calc(100vh - 10px)  //表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px)  //表示整个浏览器窗口宽度减去10px的大小

vw Viewport宽度， 1vw 等于viewport宽度的1%

vh Viewport高度， 1vh 等于viewport高的的1%

7、自动换行

style="word-wrap: break-word;word-break: break-all;"

8、表格头添加斜杠

.l-b {
   position: absolute;left: 0;bottom: -10px;}.r-t {
   position: absolute;right: 0;top: -10px;}.xie-line{
   position: absolute;width: 120px;height: 40px;margin-left: -10px; }.xie-line::before{
   content: "";position: absolute;left: 0;top: 0;width: 100%;height: 20px;box-sizing: border-box;border-bottom: 1px solid #e1e6f0;transform-origin: bottom center;animation: slash 5s infinite ease;transform: rotateZ(18deg) scale(1.414)}

9、空格

持续更新中…

转载地址：http://qayai.baihongyu.com/