css常用小知识点

2024-03-07 07:57:26

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双击事件

<li @dblclick="getInfo"></li>

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、表格头添加斜杠

<template slot="header" slot-scope="scope">
    <div class="l-b">
        远程组
    </div>
    <div class="r-t">
        客户等级
    </div>
    <div class="xie-line"></div>
</template>

<template slot-scope="scope">
    {{scope.row.name}}
</template>

.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、空格

&nbsp;

持续更新中…

码农公寓