本文已参与「新人创作礼」活动，一起开启掘金创作之路。
内核浏览器私有属性
- “-webkit”是以webkit为内核浏览器私有属性的意思
- -moz代表firefox浏览器私有属性；
- -ms代表IE浏览器私有属性；
- -webkit 1、代表chrome、safari私有属性；2、是以webkit为内核浏览器私有属性的意思
- -o代表Opera私有属性。
el-tree中更改鼠标移动时、点击时和失去焦点时的背景色
/* 背景色 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: rgb(244, 244, 244,0.3);
border-radius: 20px;
}
/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover{
background-color: rgb(244, 244, 244,0.3);
border-radius: 20px;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus > .el-tree-node__content {
background-color: rgb(244, 244, 244,0.3);
border-radius: 20px;
}
关于背景色
1.消除背景色
background-color:transparent;
2.图片填充-全部
background-image: url(../../../static/img1/title_top.png) no-repeat; background-size: 100% 100%;
3.图片填充-重复
表格
如何让文字显示在td最上方
为表格设置合并边框模型
border-collapse:collapse;
注意：属性一定要放到table中，否则无效。
去掉定位：
position: static;
强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}
CSS设置不转行：
- overflow:hidden 隐藏
- white-space：normal 默认
- pre 换行和其他空白字符都将受到保护
- nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
设置强行换行：
- word-break:
- normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
- break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
- keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
英文不换行
CSS里加上 word-break: break-all;
三元表达式
三元运算，顾名思义会有三个要素，表达式的大致组成为condition ? expr1 : expr2；一个语句加两个表达式。问号之前为判断语句。如果为真，则执行第一个表达式，如果为假，则执行第二个表达式。
1、标签内直接改样式
<p :style="{'color': (activeIndex2==index ? '#3d8cff':'#303133')}">变色</p>
:limit="isAdd?'1':''"
2、标签内判断class名
<p :class="[activeIndex2=='password'?'class1':'class2']"></p>
多个class名
:class='["classify",current=="0" ? "active" : ""]'
3、判断值
{{WaterState==‘0’?‘优’:WaterState==‘1’?‘良’:WaterState==‘2’?‘差’:‘无’}}
4、可以根据需要来调用自己想要的function来处理更多的事情。
代码如下:
function a(){
do something
}
function b(){
do something
}
flag ? a() : b();
根据渐变的两个色值+据百分比，取对应的色值。
background: linear-gradient(90deg,#FAD961,#F76B1C);
