细节拓展
1.img标签的alt和title属性
alt：图片加载失败显示的提示文字
title：鼠标悬停时显示的提示文字
注：在IE7及以下，当没有设置title时，alt会充当鼠标悬停时显示的文字
2.简述一下 src 与 href 的区别
从同步、异步的类似角度来说：
src：相当于同步代码，会阻塞程序的运行
例：< script src =”js.js”>< /script >
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕
href：相当于异步代码，不会阻塞程序的运行
例：< link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理
3.数据结构
//获取一个字符串的长度
console.log(“获取一个字符串的长度”);
let {length} = “mochaDemo”;
console.log(length);
4.flex问题
- flex布局，左右分布，左边固定长度，右边flex撑满，屏幕大小变化，右边会掉落，可以给右边加上样式width：0;解决。
5.axios请求中断或取消
需要使用浏览器原生的AbortController来终止请求。
- 对应请求已经被发送并且正在处理中 ---- 中止该请求。
- 请求已经完成 ---- 不会执行任何操作。
使用情况
- 使用AbortController提供的onabort事件，监听该事件，并绑定事件处理函数，在函数中进行后续处理。
- 使用try…catch，终止请求之后，会触发catch，在catch中进行后续处理。
*注：*如果同时使用onabort事件和try…catch，则会先触发onabort事件，再触发try…catch。
示例：
<button @click="send">点击请求</button>
<hr />
<button @click="cancelSend">取消请求</button>
let controllerObj = reactive({
controller: null,
});
const send = () => {
controllerObj.controller = new AbortController();
const signal = controllerObj.controller.signal;
fetch("url/uuu", { signal })
.then((response) => {
console.log("下载完成", response);
})
.catch((err) => {
console.error(`下载错误：${err.message}`);
});
};
const cancelSend = () => {
if (controllerObj.controller) {
controllerObj.controller.abort();
console.log("中止下载");
}
};
// 简单模拟后台
import express from 'express'
const app = express()
app.get('/uuu', (req: any, res: any) => {
res.setHeader("Access-Control-Allow-Origin", "*");
setTimeout(() => {
res.end('2211')
}, 3000)
})
app.listen(901, () => {
console.log(`服务启动在:localhost:90/`);
})
6.bind,call,apply
bind(this,args)调用不会立即执行该方法。
call(this,...args),apply(this,args)调用会立即执行该方法。
// call和apply区别
call的参数是多个拆开的
apply的参数是个类数组，只能有一个。
7.Generator函数（俗称带*函数）
示例：
function* fn() {
yield 'aaa'; // yield 表达式 1，完成状态变为false
yield 'bbb'; // yield 表达式 2 ，完成状态变为false
return 'ccc' // 遇到return结束整个进程，完成状态变为true
}
const it = fn()
// 执行一次next,都会到下一个yield或return暂停fn的内部程序
it.next() // 执行到yield 1的位置 , 返回值为{value: 'aaa',done:false}
it.next() // 执行到yield 1的位置 , 返回值为{value: 'bbb',done:false}
it.return() // 在上次暂停位置结束进程，不在向下执行, 返回值为{value: undefined,done:true}
// 此后在执行next或return，返回值都是{value: undefined,done:true}
// 循环
for(let value of it) {
// value 是返回值中的value
}
示例：Generator函数嵌套
yield*表达式后可以跟着一个可遍历对象，例如Array,String,Map,Set对象,以及一个Generator函数。
function* one {
yield 'one111';
yield 'one222';
}
function* two {
// one() // 这样调用并不会执行，只是返回迭代器 1
// yield one() // 不会执行，只是返回迭代器 2
yield* one() // 按顺序执行one函数中yield 3
yield 'two111';
yield 'two222';
}
// 循环
for(let value of it) {
// value 是返回值中的value
// 1 和 2 打印结果为 'two111','two222'
// 3 打印结果为 'one111','one222','two111','two222'
}
7.样式小节
1.媒体查询
// 默认背景色
body {
background-color: pink;
}
// 页面大于300px,背景色修改为蓝色
@media (min-width: 300px) {
body {
background-color: blue;
}
}
// orientation 控制纵横向样式
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
2. 选择器
// div下的第一个p元素
div>p{
color: aqua;
}
// 选中有title属性的div元素
div[title] {
color: aqua;
}
// 选中有title属性并且值为111的div元素
div[title=‘111’] {
color: aqua;
}
// 选中p元素的第一行
p::first-line {
}
// 选中文档中被选择的那部分
div::selection {
color: red;
}
// 选中p同级后面的img
p + img {
}
3. 控制继承
4. 相对长度单位
补充： fr ---- grid布局的单位，表示占可用空间的多少份额。
5. 布局
- position: sticky 粘性定位
// 不管原先header处于什么位置，随页面滚动而滚动，直到他滚动到设定位置（left: 0;top:0），定住不在移动
header {
position: sticky;
left: 0;
top: 0;
color: red;
}
- grid网格布局
main {
display: grid;
/* 每列最小宽度为200px,大于200px则自动占用可用空间的1份额，列数自动铺满一行 */
/* 有点像bootstrap,当屏幕宽度不同时，一行显示的列数不同
例如：小屏幕显示2列，中屏幕显示3列，大屏幕显示4列，感觉可以替代bootstrap和媒体查询相似功能
*/
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
/* 间距 */
grid-gap: 20px;
}
div {
background-color: antiquewhite;
border: 1px solid rosybrown;
}
// html
<main>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<div>666</div>
</main>
- [ grid-area命名元素放置布局]
main {
display: grid;
grid-template-areas:
'header .' // .表示这部分格子留空
'nav content'
'footer footer'
;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
header {
grid-area: header;
background: firebrick;
}
nav {
grid-area: nav;
background-color: aqua;
}
article {
grid-area: content;
background: hotpink;
}
footer {
grid-area: footer;
background: darkcyan;
}
效果图：
- 多列布局
<style>
main {
/* 创建多少列 */
column-count: 3;
/* 基础列宽，有剩余空间时，每列平分剩余的空间份额 */
column-width: 200px;
/* 控制列间隙 */
column-gap: 10px;
/* 列间隙中间添加分隔线，不占用空间大小 */
column-rule: 10px solid khaki;
}
div {
background: fuchsia;
}
</style>
</head>
<body>
<main>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<div>666</div>
<div>111</div>
</main>
</body>
效果图：
按照分割份额占据对应份额排版的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
height: 100%;
}
.box {
height: 100%;
display: grid;
/* 将横行分割成同等份的3份（列） */
grid-template-columns: repeat(3, 1fr);
/* 将竖行分割成同等份的3份（行） */
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.one {
/* 2 --- 竖着占用2份 1 ----- 横着占用1份 总的份额是上面grid-template-columns或 grid-template-rows分割的份数*/
grid-area: span 2 / span 1;
background-color: rebeccapurple;
}
.two {
grid-area: span 1 / span 2;
background-color: brown;
}
.three {
grid-area: span 2 / span 1;
background-color: rgb(42, 165, 54);
}
.four {
grid-area: span 2 / span 1;
background-color: rgb(60, 19, 182);
}
.five {
grid-area: span 1 / span 1;
background-color: rgb(190, 223, 25);
}
</style>
</head>
<body>
<div class="box">
<div class="one"> 1 ---- 横行的1/3 竖行的2/3</div>
<div class="two">2 ---- 横行的2/3 竖行的1/3</div>
<div class="three">3 ---- 横行的1/3 竖行的2/3</div>
<div class="four">4 ---- 横行的1/3 竖行的2/3</div>
<div class="five">5 ---- 横行的1/3 竖行的1/3</div>
</div>
</body>
</html>
更多可查询 MDN
8. with关键词
const obj = {
name: 'lisi',
age: 18,
}
with(obj) {
sonsole.log(this) // --- this指向obj
console.log(age) // ---- obj.age -- 18
}
9.Function 字符串function
new Function(arg1,arg2...,functionbody))
例子：
new Function('name','age','console.log(name,age)')
10.多行溢出省略
<style>
div {
border: 1px solid red;
width: 300px;
/* 2行溢出省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<body>
<div>
撒旦水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶撒旦飒飒vvvvvvvvvvvv持续性嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻大胆的改革帆帆帆帆帆帆帆帆帆帆帆帆帆帆
</div>
</body>
</html>
11.文本填充颜色
-webkit-text-fill-color: red; // 优先级大于color
color: aqua;
12.文字描边-- 可做字体镂空
-webkit-text-stroke: 2px red; // 描边宽度，描边颜色
// 由其下二者组成
// -webkit-text-stroke-width: 2px;
// -webkit-text-stroke-color: red; // 如未设置，取color值
13.选中强调色
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
input {
accent-color: auto;
display: block;
width: 30px;
height: 30px;
}
input.custom {
accent-color: rebeccapurple;
}
14.动画animation
.cylon_eye {
background-color: red;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.9) 25%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.9) 75%
);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
@keyframes move_eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
- animation-delay – 动画延时
- animation-direction – 动画播放方向 normal-正向，reverse-反向，alternate正反循环，alternate-reverse-反正循环
- animation-duration – 完成动画一个周期的时间
- animation-fill-mode – 动画在执行之前和之后如何将样式应用于其目标，none-完成和结束时都回到初始状态，forwards-完成后停留在最后一帧的状态，backwards–完成后回到初始状态，both.
- animation-iteration-count – 动画在停止前应播放的次数(infinite无数次)
- nimation-name – 指定要应用的动画名
- animation-play-state – 设置动画是运行还是暂停
- animation-timing-function – 设置动画运动曲线
15.aspect-ratio设置盒子纵横比
aspect-ratio: 16 / 9;
17.backface-visibility – 当元素背面朝向观察者时是否可见。
取值：visible 、hidden
18.background-attachment —决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
scroll – 背景相对于 元素本身 固定，而不是随着它的内容滚动
fixed – 背景相对于 视口 固定
local – 背景相对于 元素的内容 固定
19.background-blend-mode
设置多张背景图，颜色，重合部分按照何种模式进行混合
20.background-clip
设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
border-box — 延伸到边框（出现在边框的下层）
padding-box – 延伸到内边距
content-box — 只到内容区
text – 只应用到文字上，作为文字的前景色展示
21.background-origin
指定背景图片background-image 属性的原点位置的背景相对区域。
border-box
padding-box
content-box
22.writing-mode — 文字书写方向
23.linear-gradient() – 线性渐变函数
<style>
div {
height: 100px;
background:
/* 从左到右 先红色在蓝色 右 下 角位置 不通铺 */
linear-gradient(to right, red, blue) right bottom no-repeat,
/* 可连续写多个线性渐变，background-size两个数字为一组，对应线性渐变的宽高设置 */
linear-gradient(to right, red, blue) left top no-repeat,
/* 可在最后补上背景色 */
linear-gradient(to bottom, yellow, green) left bottom no-repeat rgba(117, 207, 117);
background-size:
30px 15px, /* 第一个线性渐变的宽高 */
15px 30px, /* 第二个线性渐变的宽高 */
10px 10px; /* 第三个线性渐变的宽高 */
}
</style>
<body>
<div>我是一个按钮</div>
</body>
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
