详细的css教程推荐查看 MDN
1. 文字单行显示,超出用省略号显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2. 文字多行显示,超出用省略号显示
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
仅在webkit内核浏览器生效(谷歌浏览器)
3. 设置滚动条样式
::-webkit-scrollbar
滚动条整体部分
::-webkit-scrollbar-button
滚动条两端的按钮
::-webkit-scrollbar-track
外层轨道
::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分
::-webkit-scrollbar-thumb
滚动条里面可以拖动的那个
::-webkit-scrollbar-corner
边角
::-webkit-resizer
定义右下角拖动块的样式
详细:
:horizontal
水平方向的滚动条
:vertical
垂直 方向的滚动条
:decrement
应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
:incrementdecrement
类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
:start
伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end
类似于start伪类,标识对象是否放到滑块的后面。
:double-button
该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
:single-button
类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
例如:
.box {
width: 200px;
height: 200px;
background-color: #ccc;
overflow-y: auto;
}
.box::-webkit-scrollbar-thumb {
background-color: bisque;
border-radius: 5px;
}
.box::-webkit-scrollbar {
background-color: blueviolet;
width: 10px;
border-radius: 5px;
}
仅在webkit内核浏览器生效(谷歌浏览器)
4. 字体样式(镂空、渐变、背景)
- 文字镂空
.box {
font-size: 120px;
color: white;
-webkit-text-stroke: 6px red;
}
- 文字渐变色
.box {
/* 转变为行内块元素 文字渐变才会生效 */
display: inline-block;
font-size: 50px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
- 文字背景图
.box {
font-size: 100px;
color: transparent;
background-image: url("https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_45fa33e6a9717c6d418ccae4b8eff9b4/0");
-webkit-background-clip: text;
background-position:center;
}
5. 清除浮动
使用 Clearfix 清除浮动,解决父类高度崩塌。
.clearfix {
zoom: 1;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
6. 引入字体
<style>
@font-face {
font-family: 'font-cicada';
src: url('./abc.ttf');
}
.box {
font-family: 'font-cicada';
font-size: 30px;
}
</style>
<body>
<div class="box">你好吗?</div>
</body>
7. 拖动右下角改变一个div元素尺寸大小
.box {
resize: both;
overflow: auto;
border: 2px solid #000;
}
8. 网格布局
要使 HTML 元素变成一个网格容器,可以将 display 属性设置为 grid
或 inline-grid
grid-template-columns
属性定义了网格布局中的列的数量,它也可以设置每个列的宽度。
grid-template-rows
属性设置每一行的高度。网格引入了 fr
单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
grid-column-gap
,grid-row-gap
, grid-gap
可以使用这些属性来调整间隙大小。
justify-content
属性用于对齐容器内的网格,设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
align-content
属性用于设置垂直方向上的网格元素在容器中的对齐方式。
grid-column
属性定义了网格元素列的开始和结束位置。
grid-row
属性定义了网格元素行的开始和结束位置。
<style>
.box {
width: 300px;
height: 300px;
background-color: #000;
border: 1px solid #000;
/* 网格布局 */
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 1px;
}
.item {
background-color: #fff;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
9. 其他
user-select: none;
禁止用户选中文本outline: none;
去除当点击Input元素时显示的边框opacity: 0.5;
给背景颜色添加透明度,取值范围是0~1cursor: pointer;
改变鼠标指针样式
cursor:hand;手型
cursor:pointer;手型
cursor:auto;由系统自动给出
cursor:crosshair;十字型
cursor:text;I字形
cursor:wait;等待
cursor:default;默认
cursor:e-resize;向右的箭头
cursor:ne-resize;向右上箭头
cursor:n-resize;向上箭头
cursor:nw-resize;向左上箭头
cursor:w-resize;向左箭头
cursor:sw-resize;向坐下箭头
cursor:s-resize;向右下箭头