欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot
CSS 匹配
nav .user（中间有空格）：
匹配到class属性是nav标签下面的class属性含有user的元素。
.user.login（中间没有空格）：
匹配到class属性同时含有user和login的元素。
CSS 弹性布局（一维布局）
水平居中：
margin: 0 auto;
CSS3:
display: flex; //弹性布局
flex-direction: row; //行（默认）
flex-direction: column; //列
flex: 1; //占满
flex-wrap: wrap; //自动换行
justify-content: center; //水平居中
justify-content: space-between; //左右两端开始排列
justify-content: space-around; //每个元素两侧的间隔相等
justify-content: flex-start; //从行首起始位置开始排列（默认）
justify-content: flex-end; //从行尾位置开始排列
align-items: center; //垂直居中（必须设置height）
align-content: flex-around; //交叉对齐
order: 1; //单个元素排序
align-self: center; //单个元素位置
弹性布局
CSS 行 块 内联块
display: inline; //行标签
display: block; //块标签
display: inline-block; //内联块
CSS 定位
position: relative; //相对定位（相对父级的容器进行定位）
top: 50%;
left: 50%;
position: absolute; //绝对定位（父级要有relative，然后相对父级的容器进行定位）
top: 50%;
left: 50%;
position: fiexd; //固定定位
z-index: 1; //显示权重
CSS 单位
em: 根据父级元素进行设置
rem: 根据根级元素进行设置
vh: 浏览器可视窗口高度百分比（100vh）
vw: 浏览器可视窗口宽度百分比（100vw）
CSS Grid 网格布局（二维布局）
display: grid;
grid-template-columns: 70% 30%; //列
grid-template-columns: 1fr 2fr 1fr; //列
grid-column-gap: 1rem; //列间距
grid-row-gap: 1rem; //行间距
grid-auto-rows: minmax(100px, auto); //行高
justify-items: center; //行对其
align-items: center; //列对其
justify-self: start; //单个元素位置
align-self: end; //单个元素位置
grid-row: 1/3; //单个元素跨行（1到3）
grid-column: 1/3; //单个元素跨列（1到3）
CSS 响应式
@media screen and (max-width: 768px){}
CSS 背景图片
background: #333 url('') no-repeat center center/cover;
height: 100vh;
视差滚动页:
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%
CSS 模糊切换
.show::after{
content: '';
height: 100vh;
width: 100%;
background-image: url('');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: block;
filter: blur(10px); //模糊
-webkit-filter: blur(10px);
transition: all 1s;
}
.show:hover::after{
filter: blur(0px);
-webkit-filter: blur(0px);
}
CSS 选择器
div>p
所有直接父级标签是div的p标签
div+p
div标签下的第一个兄弟p标签
a[name]
具有name属性的a标签
a[name="ld"]
name属性值为ld的a标签
li:first-child
li标签的第一个子标签
li:nth-child(3)
li标签的第三个子标签
li:nth-child(3n)
li标签的三的倍数个子标签（基数odd，偶数even）
CSS 伪元素
适合配置背景图片
.class::before {
content: '';
background: url('') no-repeat center center/cover;
opacity: 0.4;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.class::after {
content: '';
color: red;
}
CSS box-shadow text-shadow 阴影
box-shadow: 10px 10px 5px 1px teal;
box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.5);
text-shadow: 10px 10px 5px 1px teal;
text-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.5);
CSS 全局变量
:root {
--m-color: teal;
}
body {
background: var(--m-color);
}
CSS animation 动画
.box {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
animation-name: an; //动画名
animation-duration: 2s; //动画周期
animation-iteration-count: infinite; //动画次数（无限次）
animation-fill-mode: forwards; //动画最终停留状态
animation-direction: alternate; //动画方向（奇偶切换）
animation-delay: 2s; //动画延迟时间
animation-timing-function: ease-in-out; //缓慢开始缓慢结束
//简写
animation: an 2s infinite forwards alternate ease-in-out;
}
@keyframes an {
//两点
from {
width: 200px;
}
to {
width: 400px;
}
//运动轨迹
25% {
top: 0;
left: 200px;
background: red;
border-radius: 50%;
}
50% {
top: 200px;
left: 200px;
background: blue;
border-radius: 50%;
}
75% {
top: 200px;
left: 0;
background: teal;
border-radius: 50%;
}
}
CSS transition 过度
.box {
background: blue;
transition-property: background; //需要过度的属性
transition-duration: 2s; //过度周期
transition-delay: 2s; //过度延迟
transition-timing-function: ease-in-out; //缓慢开始缓慢结束
//简写
transition： all 2s ease-in-out;
}
.box:hover {
background: teal;
transform: rotate(25deg); //旋转
transform: scale(2); //放大2倍
transform: translateX(100px); //向右移动
transform: translate(100px, 100px); //向右下移动
}
JS Ajax
<script>
function load() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/list', true); //异步
xhr.onload = function () {
if (this.status == 200) {
var json = JSON.parse(this.responseText);
...
}
};
xhr.onreadystatechange = function () {
if (this.status == 200 && this.readyState == 4) {
console.log(this.responseText);
}
};
xhr.send();
}
</script>
JS Axios
get
function find() {
axios({
method: "get",
url: "/list",
params: {
name: "ld"
}
}).then(res => console.log(res))
.catch(err => console.log(err));
axios.get("/list?name='ld'", {
timeout: 5000
}).then(res => console.log(res))
.catch(err => console.log(err));
}
post
function save() {
axios.post("/save", {
name: "ld",
age: 12
}).then(res => console.log(res))
.catch(err => console.log(err));
}
put
function put() {
axios.put("/put", {
name: "ld",
age: 12
}).then(res => console.log(res))
.catch(err => console.log(err));
}
delete
function del() {
axios.delete("/delete/1").then(res => console.log(res))
.catch(err => console.log(err));
}
批量请求数据
function findAll() {
axios.all([
axios.get("/list?age=1"),
axios.get("/list?age=2")
]).then(res => console.log(res))
.catch(err => console.log(err));
}
自定义请求头
const config = {
headers: {
Authorization: "token"
}
}
function save() {
axios.post("/save", {
name: "ld",
age: 12
}, config).then(res => console.log(res))
.catch(err => console.log(err));
}
请求拦截：
axios.interceptors.request.use(
config => {
}
)
Axios实例化：
const axiosInstance = axios.create({
baseURL: ""
})
axiosInstance.get()
