音频：
<audio src="" controls="controls" autoplay="autoplay" loop></audio>——音频循环播放
视频：
<video src="./audio/123.mp4" controls autoplay muted loop style="width: 300px;height: 100%;"></video>——视频自动播放
表格：
rowspan="2"———合并行
border-collapse:collapse;——去除边框线
a标签：
表单：
单选效果需要设置相同的name
<input type="radio" name="sex" checked>
搜索框去除边框：
border: none;——去除边框线
outline: none;——去除点击时的边框线
改变input框里的字体颜色：
下拉框：
select：整体， option：每一项， selected：默认选中
CSS属性：
font-style: italic;——字体倾斜
font-weight: bold;——字体加粗
text-decoration: none;——去除下划线
text-indent: 2em;——p标签缩进两格
a:hover——伪类选择器
background-color: transparent;——背景颜色透明
transparent，rgba(0,0,0,0)——背景颜色透明
display: inline-block;——转成行内块
背景连写属性：
background: color image repeat position;
background: skyblue url('./img/2.jpg') no-repeat center center;
QQ在线客服跳转 ：
<a href="wpa.qq.com/msgrdv=3&ui…" target="_blank">————QQ咨询
<a href="tel:18476936925">拨打电话//电话点击跳转功能
ul无序列表快速创建：
ul>li{我是第$个li}*10——快速创建多个
ul>(li>a{百度一下})*10——快速创建li>a
ul>(li>a[href="#"]{导航$})*5——快速创建多个li>a加类名
ul>(li>a[href="#"]{我是第$个a标签})*8
边框：
border: 1px solid red;
solid(实线)
dashed(虚线)
dotted(点线)
box-sizing: border-box;——内减属性（边框宽高是多少就是多少）
字体：
font:style weight size 字体;——font四个属性连写
font-size: 16px;
font-weight: normal;
font-weight: bold;
font-style: italic;——倾斜（正常：normal）
color: red !important;——颜色层级最高
text-transform: uppercase;——英文字母大小写
选择器：
p,div,span,h1——并集选择器
div a——后代选择器
div>a——子代选择器
a:hover——伪类选择器
背景：
background-color: orange;——背景颜色
background-image: url('./img/lxmeinv.jpg');——背景图片
background-repeat——on-repeat(图片不平铺)
background-position: center;——背景图片居中
background: orange url('./img/lxmeinv.jpg') no-repeat center;——背景图片连写(颜色，图片，不重复，居中)
background-size: cover;（或者：background-size: 100%;）——背景图片铺满
display: flex;align-items: center;justify-content: center;——背景图片加上这个字体水平垂直居中
行内块：
display: inline-block;——转为行内块元素
display: block;——转为块级元素
display: inline;——转为行内元素
dispaly:none;——隐藏
溢出overflow：
visible：可见
hidden：隐藏
scroll：生成滚动条
auto：自动滚动条
解决外边距塌陷现象：
结构伪类选择器：
li:first-child ——选中第1个
li:last-child ——选中倒数第1个
li:nth-child(4n) ——选中4的倍数
li:nth-last-child(4n) ——选中倒数4的倍数
li:first-child a ——选中第1个li中a标签
ul li:nth-child(1) a:nth-child(3){color: red;} ——选中第1个li中第三个a标签
伪元素：
div::before{content: "你";}——在元素前面加内容
div::after{content: "好";}——在元素后面加内容
精灵图使用：
定位position（子绝父相）：
relative：相对定位，原来的位置保留
absolute：绝对定位，原来的位置不保留
fixed：固定定位
绝对定位让盒子居中：
transform: translate(-50%,-50%);
CSS实现鼠标移上去显示图片：
字体对齐：
vertical-align: top;
解决搜索框的对齐属性：
(display:flex;)(float:left;)(vertical-align: top;)——这三个属性都可以
鼠标光标类型属性cursor：
边框圆角：
border-radius: 50%;
opacity——透明
搜索框与按钮对齐属性：
边框三角形：
(border-bottom: 100px solid red;)——通过调整不同边框的宽度，可以调整三角形的形态
a标签链接伪类选择器：
焦点选择器：
input:focus{background-color: red;}——点击输入框变颜色
文字阴影：(text-shadow)
背景图片缩放连写：
动画转换：
旋转：
transform: translate(800px) scale(1.5) rotate(1800deg); ——先位移后然后放大旋转
先位移后旋转：
渐变：
动画：
perspective——视角(3d立体效果)
transform——转换
translate——转变(平移)
transition——过度
animation——动画
infinite——无限重复
alternate——执行完毕退回来执行动画
forwards——执行完毕不返回默认状态
animation: Jordan 3s steps(5) 2s infinite alternate forwards;
animation-play-state: paused;——鼠标移到图片暂停动画(配合hover使用)
linear——匀速旋转（旋转速度快慢一致）
animation: ani 1s infinite linear;
动画属性：
https://www.processon.com/view/link/622f1af2f346fb07f92a0344 ——————动画思维导图
转换旋转：
transform:rotete(right,top);——改变中心旋转位置
transform: translate3d(x, y, z);——空间转换连写属性
rotate空间旋转效果：
transform: rotate3d(1,1,1,10deg);
立体呈现：
transform-style: preserve-3d——开启3d空间
space-between——水平两边贴合对齐
space-around——水平平均对齐(首尾位距离小)
space-evenly——绝对水平平均对齐(首尾距离全部都相等)
flex-wrap: wrap;——自动换行属性
flex-wrap: nowrap;
flex-wrap: wrap;
flex-direction: column;——设置水平垂直方向
column——垂直方向
row——水平方向
flex: 1;——设置占至剩移的指数
align-self——设置子项让单个元素垂直对齐方式
flex-start——左对齐
flex-end——右对齐
center——居中
https://www.processon.com/view/link/622f1af2f346fb07f92a0344 ——————flex思维导图笔记
文字超出范围隐藏显示省略号：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;——超出范围隐藏显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;——超出2行显示省略号
bootstrap框架：
