目录
一、动态 CSS（状态驱动）
单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)
<script setup>
const theme = {
color: 'red'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
实际的值会被编译成 hash 的 CSS 自定义 property，CSS 本身仍然是静态的。自定义 property 会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式更新。
二、浏览器私兼容（内核浏览器私有属性）
- “-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.图片填充-重复
4.横向充满背景，上下居中
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background: url("../../../static/img/login.png") center no-repeat;
background-size: 100%;四、表格
1.如何让文字显示在td最上方
<td style="vertical-align:top" >为表格设置合并边框模型
border-collapse:collapse;
注意：属性一定要放到table中，否则无效。
2.多余部分变...
<el-table-column prop="content" label="意见描述" show-overflow-tooltip></el-table-column>3.表格单元格无值时自定义显示内容
.el-table .el-table__body td .cell:empty::after,
.el-table .el-table__body td .cell > span:empty::after,
.el-table .el-table__body td .cell .approval:empty::after,
.el-table .el-table__body td .cell div:empty::after,
.el-table .el-table__body td .cell .line-limit-length:empty::after {
content: "---";
}
五、定位
去掉定位
position: static;六、换行
1.强制不换行
div{
white-space:nowrap;
}2.自动换行
div{
word-wrap: break-word;
word-break: normal;
}3.强制英文单词断行
div{
word-break:break-all;
}4.CSS设置不转行：
- overflow:hidden 隐藏
- white-space：normal 默认
- pre 换行和其他空白字符都将受到保护
- nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
5.设置强行换行：
- word-break:
- normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
- break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
- keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
6.英文不换行
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>
2、多个class名
:class='["classify",current=="0" ? "active" : ""]'
3、{{}}判断值
{{WaterState==‘0’?‘优’:WaterState==‘1’?‘良’:WaterState==‘2’?‘差’:‘无’}}
4、微信小程序style的动态样式使用-三元表达式
<view style="color:{{isListName?'#5478c7':'#bfbfbf'}}">确定</view>
八、省略号显示
单行省略：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100px;
多行省略：
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 超出几行省略 */
overflow: hidden;
width:100px;
ps：需要注意的是，记得控制元素width。
九、两个边框
background: linear-gradient(180deg, #6CBB5A 0%, #43A42D 100%);
border: 1px solid #8AC769;
outline: 1px solid #459830;十、Transform
1.rotate：旋转
单位：deg(度)
transform:rotate(20deg);//顺时针旋转20度
transform:rotate(-20deg);//逆时针旋转20度2.scale：缩放
transform:scale(1.5,2);//水平扩大1.5倍，垂直扩大2倍十一、shadow阴影
1.box-shadow
说明：box-shadow: inset x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色; }
举个例子：
box-shadow: 2px 0px 14px 0px rgba(0,0,0,0.27), -1px 0px 5px 0px rgba(0,0,0,0.3);如果我们想要取消元素的阴影效果，可以将box-shadow属性的值设为none。
元素选择器 {
box-shadow: none;
}十二、系统整体搭建css
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}如果在页面需要弹性盒子(盒模型可提供最大的灵活性)
子页面样式：背景图+中心盒子
display:flex;
justify-content: center;//左右居中
align-items: center;//上下居中
height: 100%;//整体页面高度
background-image: url(/static/img/login-background.f9f49138.jpg);
background-size: cover;//禁止重复
盒子
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;十三、弹性布局（display:flex;）属性详解
Flexbox：决定了元素如何在页面上排列。
flex特点：
- 在不同方向排列元素
- 重新排列元素的显示顺序
- 更改元素的对齐方式
- 动态地将元素装入容器
在 Flexbox 模型中，有三个核心概念：
– flex 项（注：也称 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向
容器属性：
说明：弹性布局（display:flex;）属性详解 - cdgogo - 博客园 (cnblogs.com)
十四、特殊模式格式总结
1、[type=search]
在搜索模式下的样式：
.van-field__control[type=search]{
text-align: center;
}
2、:disabled
在不能输入模式下的样式：
.van-field__control:disabled {
color: #111111;
-webkit-text-fill-color: #111111;
}
3、:before
在CSS中用于向选定的元素之前插入内容 ：
.van-field__label--required:before {
content: "✲";
}
4、:after
在CSS中用于向选定的元素之后插入内容 ：
.van-cell:after {
position: relative;
}
5、滚动条样式
.dialog-content-overflow-common {
overflow: auto;
}
.dialog-content-overflow-common::-webkit-scrollbar{
width: 7px;
height: 7px;
background-color: rgb(241, 241, 241);
border-radius: 3px;
}
.dialog-content-overflow-common::-webkit-scrollbar-thumb {
background-color: rgb(193, 193, 193);
border-radius: 3px;
}6、省略号代替超出部分
.text-overflow-ellipsis{
// 表示当文本内容超出所在容器的宽度时，用省略号来代替超出的部分。
text-overflow: ellipsis;
// 表示文本不换行。
white-space:nowrap;
// 表示超出容器的内容将被隐藏。
overflow: hidden;
}7、一行 / 行对齐
/* 一行 */
.img-word-common-1 {
display: inline-flex;
align-items: center;
}
.img-word-common-1>img {
vertical-align: middle;
margin-right: 5px;
margin-right: calc(var(--scale) * 5px);
}
.img-word-common-1>div {
display: table-cell;
vertical-align: middle;
}
/* 行对齐 */
.row {
display: flex;
flex-flow: row;
align-items: center;
overflow: auto;
}
十五、调用function
function a(){
do something
}
function b(){
do something
}
flag ? a() : b();十六、根据渐变的两个色值+据百分比，取对应的色值。
background: linear-gradient(90deg,#FAD961,#F76B1C);
扫一扫
1173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
