css使用收集

文字

设定文本块中第一行的缩进

text-indent:5px;

设置文字左右间隔

letter-spacing: 2px;

设置文字上下间隔

line-height: 25px;

设置css文本不可选中

user-select: auto|none|text|all|element;

auto 默认。如果浏览器允许，则可以选择文本。
none 防止文本选取。
text 文本可被用户选取。
all 单击选取文本，而不是双击。
element可以选择文本，但选择范围受元素边界的约束

怎么让div宽度自适应文字内容？

直接用css3的fit-content：

width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;

css文本超出隐藏，鼠标悬浮显示全部

p {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 200px; /* 指定最大宽度 */
}
p:hover {
  white-space: normal; /* 显示全部 */
  overflow: visible; /* 取消超出隐藏 */
  max-width: none; /* 取消最大宽度 */
}

单行文本超出隐藏

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本超出隐藏

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

文字底部增加渐变的颜色

<div style="background:#000;height:200px;">
	<div class="bg-box-text">
		项目进度
	</div>
</div>

.bg-box-text {
    position: relative;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #00fffc;
    width: fit-content;

}

.bg-box-text:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: -5%;
    width: 110%;
    height: 3px;
    color: #00fffc;
    background: linear-gradient(to left, rgba(0, 255, 252, 0), rgba(0, 255, 252, 1), rgba(0, 255, 252, 0));
    padding: 0 10px;
    margin: 0 -10px;
}

将单词截断换行

word-break:bread-all;（如果该行末端有个英文单词很长，会将单词截断，word在文末，-break在下一行的开头

word-break:bread-all;
/*强制换行*/

word-wrap:break-word;恰恰与之相反不会将单词截断，而是直接换行在下一行显示完整的单词

word-wrap:break-word;

布局

实现局部滚动

.content{
    height: 200px; /*竖着滚动必须设置高*/
    width:200px; /*横着滚动必须设置宽 */
    white-space: nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到标签为止*/
    background: #0066;
    color: #fff;
    overflow-y: scroll; /*y轴 竖着可以上下滚动*/
    overflow-x: scroll;/*x轴 横着可以左右滚动*/
}

怎么让图片和文本对齐
https://blog.csdn.net/zxl_start/article/details/128846951

css画图形

css画一个扇形

<div class="sector"></div>

<style>
.sector {
    border-radius: 80px 0 20px;
    width: 80px;
    height: 80px;
    background: #666;
    transform: rotate(270deg);
}
</style>

css滚动条

.video-list{
	width:100px;
	height:100px;
	overflow: scroll;
}

.video-list::-webkit-scrollbar {
	display: none; /* 隐藏滚动条 */
}

.video-list::-webkit-scrollbar-thumb {
	background-color: #295277; /* 定义滚动条 thumb 的背景颜色 */
}

.video-list::-webkit-scrollbar-corner {
	background-color: transparent; /* 定义滚动条 corner 右下角正方形的颜色 */
}

事件

1.阻止鼠标事件

pointer-events: none;