就记录，脑子笨
强制换行
//宽度要固定
// 强制不换行，超出显示...
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// 自动换行,最多显示4行
word-wrap: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
text-overflow: ellipsis;
overflow: hidden;
// 区别
word-wrap: break-word; // 自动换行
word-break: break-all; // 英文强制换行
图片显示样式
// 图片显示样式 - 平铺
object-fit: cover;
关于滚动条样式
// 修改组件中滚动条宽度 ::前加上组件class
.slider::-webkit-scrollbar{
width:8px;
background-color: #00000040;
}
.slider::-webkit-scrollbar-thumb{
border-radius:4px;
background-color: #00000040;
}
.slider::-webkit-scrollbar-track{
background-color:transparent;
}
// 全局修改, 在app.vue中或者main.js中引入
::-webkit-scrollbar{
width:8px;
background-color: #00000040;
}
::-webkit-scrollbar-thumb{
border-radius:4px;
background-color: #00000040;
}
::-webkit-scrollbar-track{
background-color:transparent;
}
关于hover事件
// 关于hover事件
// 父对子
<div class="div1">
<p class="p1">hello, world</p>
</div>
.div1 {
background-color: red;
width: 200px;
height: 200px;
.p1 {
color: white;
}
}
.div1:hover .p1 {
color: black;
}
// 同级
<div class="div1">
div1
</div>
<p class="p1">
p1
</p>
<p class="p1">
p2
</p>
.div1 {
background-color: red;
width: 200px;
height: 200px;
}
.p1 {
color: black;
width: 100px;
height: 100px;
background-color: orange;
}
// 同级之间，控制兄弟元素，~控制后面所有的兄弟元素
.div1:hover ~.p1 {
background-color: white;
}
// 同级之间，控制兄弟元素，但是只能控制一个，并且是相邻的后面元素
.div1:hover +.p1 {
background-color: white;
}
