设置字符间距
letter-spacing:2px;
设置单词间距
word-spacing:30px;
文字自动换行
white-space:pre; //类似html中的<pre>
white-space:pre-wrap; //文本超出自动换行
white-space: nowrap; //文本不换行
过长单词处理
word-wrap:break-word; //与上个单词后面留白
word-break:break-all; //与上个单词后面不留白,单词折行
上划线,下划线,删除线
text-decoration:overline //上划线
text-decoration:underline //下划线
text-decoration:line-throughs //删除线
text-decoration:none; //取消下划线
首行缩进
text-indent:50px;
文本大小写
text-transform:capitalize; //首字母大写
text-transform:uppercase; //全部大写
text-transform:lowercase; //全部小写
文本溢出处理
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
多行隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
图片垂直居中
display:table-cell;
text-align:center;
vertical-align:middle;
文字排列方式
边框
border-color:transparent transparent transparent red; //左三角
border-bottom-style:solid;
dotted——>点状边框
dashed——>虚线边框
solid——>实线边框
double——>双边框
groove——>双线
ridge——>三维菱形边框
inset——>三维凹边框
outset——>三维凸边框
border-bottom-width:10px;
border-radius:10px;
box-shadow:10px 10px 10px #fff;——>水平阴影 垂直阴影 阴影大小 颜色
table边框
border-collapse:collapse
overflow
overflow:auto;——>超出边框自动添加滚动条
overflow-x:scroll;
overflow-y:scroll;
背景
//background连写
background:颜色 图片地址 平铺 定位/尺寸
background-attachment:fixed;——>背景图片不会随着页面的滚动而滚动
local——>背景图片随着元素内容的滚动而滚动
scroll——>背景图片随着页面的滚动而滚动
background-position:top 10px right 10px;
背景图片
//背景图片不会跟随窗口缩放而缩放
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
/* 兼容Webkit内核浏览器如Chrome和Safari */
-o-background-size: cover;
/* 兼容Opera */
zoom: 1;
点击取消文字蓝色底色
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
flex
BFC
过度
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.transition {
width: 100px;
height: 50px;
background-color: #f00;
/* 哪个属性需要执行过度 */
transition-property: width, background-color, margin-left;
/* 过度时长 */
transition-duration: 5s, 5s;
/* 告诉系统过度动画速度效果 */
transition-timing-function: linear;
/* 告诉系统延迟多长时间开始动画 */
transition-delay: 2s;
}
.transition:hover {
width: 300px;
background-color: aqua;
margin-left: 200px;
}
</style>
<!-- 过度
连写
transition:过度属性(必须) 过度时长(必须) 运动速度 延迟时间,过度属性 过度时长 运动速度 延迟时间
transition:all 0s;
-->
<div class="transition"></div>
2D 3D
<style>
.transform {
width: 800px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
/* 给父元素添加后为3D效果 */
/* transform-style: preserve-3d; */
}
.transform li {
list-style: none;
width: 100px;
height: 50px;
background-color: #f00;
margin: 0 auto;
margin-top: 50px;
text-align: center;
line-height: 50px;
}
.transform li:nth-child(2) {
transform: rotate(45deg);
}
.transform li:nth-child(3) {
/* 水平方向 垂直方向 */
transform: translate(100px, 0px);
}
.transform li:nth-child(4) {
/* 水平方向 垂直方向 1代表不变 参数一样,写一个就好*/
transform: scale(1, 1.5);
}
.transform li:nth-child(5) {
/* 先旋转,在以新坐标系平移*/
/* 围绕x轴rotateX */
/* perspective:500px 近大远小,加给父元素*/
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
}
</style>
<ul class="transform">
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>综合的</li>
</ul>
动画
<style>
.animat {
width: 100px;
height: 50px;
background-color: red;
/* 1.告诉系统需要执行哪个动画 */
animation-name: lnj;
/* 3.动画持续时长 */
animation-duration: 3s;
/* 告诉系统多少时间后执行动画 */
animation-delay: 2s;
/* 动画速度 */
animation-timing-function: linear;
/* 动画执行次数 3次*/
animation-iteration-count: 3;
/* 是否往返动画 alternate往返动画*/
animation-direction: alternate;
/*
forward:元素结束状态保持动画最后一帧的样式
backwards:元素等待状态的时候显示第一帧样式
both:元素结束状态保持动画最后一帧的样式,元素等待状态的时候显示第一帧样式
*/
animation-fill-mode: none;
/* 百分比做法需要定位 */
position: relative;
/* 连写 */
/* animation:动画名称(必须) 动画时长(必须) 动画运动速度 延迟时间 执行次数 往返动画 */
}
/* 2.告诉系统我们需要创建一个名称为lnj的动画 */
@keyframes lnj {
/* from{
margin-left: 0;
}
to{
margin-left:500px;
} */
0% {
left: 0;
top: 0;
}
25% {
left: 300px;
top: 0;
}
50% {
left: 300px;
top: 300px;
}
75% {
left: 0;
top: 300px;
}
100% {
left: 0;
top: 0;
}
}
.animat:hover {
/* 鼠标移动到div,div移动暂停,鼠标离开,div继续移动 */
/* paused:停止动画 running:执行动画 */
animation-play-state: paused;
}
</style>
<div class="animat"></div>
-粘性定位(一般用于导航)
position: sticky;