web前端
html基础
1、html定义：
html：超级文本标记语言
页面中包含文本、视频、音频、图像…
html即网页的源代码，有各个标签组成
html使用标签描述网页中图片、文件、音乐、视频、超链接等
2、w3c标准：
结构标准（html）
样式标准（css）
行为标准（DOM、ECMAScript）
3、html基础结构：
<!--表示html版本， 定义文档类型 h5-->
<!DOCTYPE html>
<!-- 页面根元素， 一个页面只能有一个html根元素 -->
<html lang="en">
<!-- 页面的头部信息 -->
<head>
<!-- 页面本身的描述信息(元信息) -->
<!-- 指定编码格式UTF-8 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题 -->
<title>html基础结构</title>
</head>
<!-- 主体信息 -->
<body>
</body>
</html>
4个双标签<html><head><title><body>，2个单标签<!DOCTYPE html><meta>
<!DOCTYPE html>：声明文档类型为html
<html>：根标签
<head>：头：设置网页的全局信息
<meta charset="utf-8">：设置字符编码为utf-8
<title></title>：网页标题
</head>
<body>：身体：浏览器中显示的所有内容
</body>
</html>
4、注释
解释说明源代码,有时在测试时也可以使用
页面中没有显示效果 ,但源代码中可以查看到
注释不能嵌套
开发中一般都会写注释
5、基本标签
(1)标题标签
语法：
<hn></hn>
双标签
n[1,6]
特点：
- 逐渐变小
- 加粗
- 独占一行
- 自带上下外边距
属性:
- align：设置文本的水平对齐方式
取值：left（默认） center right - style:设置字体颜色
取值：color：‘red’…
(2)段落
语法：
<p></p>
lorem+tab 自动生成一段文字
特点：
- 独占一行
- 自带上下外边距
属性:
- align：设置文本的水平对齐方式
取值：left（默认） center right - style:设置字体颜色
取值：color：‘red’…
(3)普通文本标签
语法：
<span></span>
属性：style设置字体颜色
(4)空标签
①换行
<br>或<br/>
②水平线
<hr>
属性：
- color=“” 设置水平线的颜色
- width=“800px” px：像素 或 width=“80%” 设置水平线的宽度
- size="2px"设置水平线的高度（默认1px）
- align=“” 设置文本的水平对齐方式
取值：left center（默认） right
6、特殊符号
© ©版权符号
< <尖括号
> >尖括号
× ×
® ®注册商标
空格
7、字体标签
加粗: <strong> <b>
倾斜: <em> <i>
偏小: small
引用: blockquote(换行) q (双引号)
上标: sup 下标:sub
删除线: del
预格式标签: pre 保持源格式不变,
code: 代码标签, 语义标签, 本身没有样式效果
8、标签规范
标签名称,属性名必须小写
标签必须严格嵌套,必须闭合,即使空内容标签也闭合
属性值必须加引号
9、图像标签
图片的后缀名：JPG png GIF）
语法：
<img> 单标签
属性：
-
src=“图片路径” 指定图片的显示路径
-
alt=“文字” 当图片路径错误时提示文字
-
width：设置图片宽度
取值：数值px或数值%
-
height：设置图片的高度
取值：数值px或数值%
(一般设置一个，即只设置高或只设置宽，另一个会根据与图片的比例进行缩放)
路径：
- 网络资源路径
[网络资源路径查看方式：从网络中找图片（复制图片地址；F12找到该图片的src)] - 绝对路径：从计算机的根目录开始找图片(在服务器中无法查看，需要在本地查看)
- 相对路径：从HTML文件找图片
- 同级目录：图片和html文件在同一个目录，直接写图片的名称
- 子目录：html文件和图片的文件夹在同一级目录—文件夹名字/图片名字.后缀
- 父目录：html文件夹和图片在同一级目录—返回上一级目录/图片名字.后缀(…/图片名字.后缀)(在服务器中无法查看，需要在本地查看)
10、链接标签
a标签不继承字体颜色，需要单独设置
（1）分类
页面之间的连接、锚链接、功能连接
（2）语法
<a href="链接的地址">图片或文本</a>
（3）属性
-
href: 连接的地址, 1、html文件 2、网络地址
-
target： 目标显示窗口
可选值：_blank 新窗口， _self 当前窗口，默认
（4）锚链接：
①描述：连接到页面中的某个具体的位置，可以跨页面
②语法：
方法一：
当前页面：
<a href="#id值">文本/图片</a>
<h2 id="值"><h2>
跨页面锚连接：
<a href="./页面地址#id值">文本/图片</a>
<h2 id="值"><h2>
方式二：
<a href="#name值">文本/图片</a>
<a name="值"><h2>
（5）功能链接
语法：
<a href="mailto:邮箱地址"></a>
11、列表
（1）分类
无序列表、有序列表、定义列表
（2）无序列表：没有顺序的列表
①语法：
<ul> unorder list
<li></li> list item
</ul>
有序列表：ol
列表项目：li
②属性：
type 设置列表符号的类型
取值disc(默认)黑色实心圆点 circle空心圆 square 黑色实心正方形 none 不显示符号
③特点：
- 有序，每个li默认占正行（块元素）
- 默认li项有顺序标记，可通过css更改
- ol默认占整行，ul和li之间默认存在40px的距离（padding）
（3）有序列表：有顺序的列表
①语法：
<ol>order list
<li></li>list item
</ol>
无序列表：ul
列表项目：li
②属性：
-
type 设置列表符号的类型
取值1(默认)数字 a小写字母 A大写字母 i小写罗马字符 I大写罗马字符
-
strat 指定开始位置
取值数字
③特点：
- 无序，每个li默认占正行（块元素）
- 默认li项有顺序标记，可通过css更改
- ol默认占整行，ul和li之间默认存在40px的距离（padding）
（4）定义列表：对文本或图片进一步说明和解释
定义列表：dl
列表标题：dt
列表数据：dd
（5）列表嵌套
①有序列表嵌套无序列表
语法：
<ol>
<li>
<ul>
</ul>
</li>
</ol>
②
无序列表嵌套有序列表
语法：
<ul>
<li>
<ol>
</ol>
</li>
</ul>
12、块元素和行内元素
块元素:
默认占整行，高由内容撑开，宽度默认和父元素宽度相同
可设置宽高，但仍占用整行。可通过样式更改
如h1-h6,p,hr,ul,li,ol,dl,dt,dd, div(用来对页面进行分区，没有样式效果)
行内元素(内联元素):
元素大小和内容大小相同，
默认设置宽高不起作用，通过样式更改状态后才能设置，
特点:一行放不下自动换行
如:a, img(可设置宽高),b,em,i, strong等字体标签, span(常用来给指定的文本设置单独的样式)
13、内联框架
当一个页面使用到另外一个页面的信息，可以使用复制粘贴或内联框架
作用：代码复用
语法：
<iframe src="" frameborder="" width=""></iframe>
属性：
- name:iframe名称
- src: 引用页面的地址
- width，height ： 设置宽和高
- frameborder： 是否显示边框， 1显示 0 隐藏
- 如果设置的宽高和引入的网页大小不一致，会出现滚动条
内联框架不会被搜索引擎检索和识别
内联框架打开连接：
<a href="网址" target="框架名称（name值）">打开蜗牛学院</a>
<iframe name="" src="" frameborder="" width=""></iframe>
14、网页结构
常用的html语义标签
- header 头部
- footer 尾部
- section（小区域）
- main（大区域）
- article（文章）
- aside（边）
- nav 导航
表格和表单
表格table
语法：
<table></table>
行：<tr></tr>
列：<td></td>
属性：
-
table的属性
-
border 设置表格的边框
-
width 设置表格的宽度
-
height 设置表格的高度
-
align 设置表格的对齐方式
取值left(默认) center right
-
bgcolor 设置表格的背景颜色
-
padding 设置文字与单元格的距离
-
border-collapse: collapse;设置table与单元格的距离
-
-
tr的属性
-
align 设置该行文本的水平对齐方式
取值left(默认) center right
-
valign 设置该行文本的垂直对齐方式
取值top middle(默认) bottom
-
bgcolor 设置当前行的背景颜色
-
-
td的属性
-
align 设置单元格内文字的水平对齐方式
取值left(默认) center right
-
valign 设置单元格内文字的垂直对齐方式
取值top middle(默认) bottom
-
bgcolor 设置当前单元格的背景颜色
-
width 设置当前单元格所在列的宽度
-
height 设置当前单元格所在行的高度
-
colspan 跨列合并（从左到右）被合并的单元格需要删除 取值大于一小于列总数
-
rowspan 跨行合并（从上到下）被合并的单元格需要删除 取值大于一小于行总数
-
表单form
1.基本结构:表单< form>+表单项(input,select…)
2.属性
（1）method提交的方式
①post用户填写的信息被封装到请求对象中，看不到。在后台开发中一般做新增,
②get将表单填写的信息拼接到地址栏( url地址栏)中发送给服务器，相对不安全；拼接方式:服务器地址? name值=输入值& name值=输入值
传递信息较少
在后台开发中get用来查询
地址栏输入地址回车输入get请求
a标签连接输入get请求
（2）action提交的地址
3.表单元素
（1）input
<input type = '类型值'/>
①类型值：
-
text：文本框
-
password：密码框
-
radio：单选按钮
name值相同，选项互斥
value不显示，提交给服务器使用，默认选中checked='checked’简写：checked
-
checkbox：复选框
name值相同为一组
value不显示，提交给服务器使用，默认选中checked='checked’简写：checked
-
按钮
- submit：自带提交功能的按钮
- reset：自带重置功能的按钮
- button：不带任何功能的按钮，功能需要js实现
- image：自带提交功能的图片按钮 src：图片路径
-
file：文件域：上传文件
-
hidden：隐藏域 input type=“hidden”
②input标签中的相关属性：
-
size：元素大小
-
maxlength：输入字符数
-
name：服务器使用表单元素名称（后台）
-
value：元素初始值
-
readonly：只读
-
disabled：禁用
③label：表单标注标签 label for=“id值”
标准标签所包含的文本会和指定的的id值标签相关联，增加用户交互
（2）select：下拉列表
列表项：option
<select>
<option>
</option>
</select>
默认选中：selected='selected’简写：selected
select标签属性可选项：
size:显示指定个数的列表项；默认显示一个
multiple：允许选择多个列表项
（3）textarea：多行文本域
属性：没有value属性，内部不添加标签
- cols列数
- rows行数
（4）button标签
<button>提交</button>//默认
<button type="submit">提交</button>//具有提交功能的按钮
<button type="reset">提交</button>//具有重置功能的
<button type="button">提交</button>//普通按钮
4.表单初步验证属性
required：必须的，非空校验
placeholder:文本提示信息，填写内容后消失
pattern:使用正则表达式进行校验，符合通过，否则提示
5.h5新增表单项
类型值：
-
email：邮箱，自动验证邮箱格式
-
url：网址，自动校验网址格式
-
number：数字
-
属性
max：最大值
min：最小值
step：增加或减少间隔
-
-
range：区间
-
属性：
max：最大值
min：最小值
step：增加或减少间隔
value：默认值
-
-
search：搜索
表单元素：
所有的表单元素均有两套值：默认值和提交值
操作默认值可以使用标准dom方法：
form.uid.setAttribute('value',123)
操作提交值，所有的表单元素都有value属性，这个属性关联到提交值，且可读可写。
表单提交方式有很多，不能监控按钮，需要为form标签添加submit事件，这个事件是表单提交时间。reset：表单的重置事件。
单选的选择项的值可以使用如下方式获取
form.gender.value//获取选中项的值
复选框获取radioNodeList对象，但选中时，radioNodeList不变，无法通过此属性判断选中项。通过遍历的方式判断。
文件
// 文件：fakepath虚假的地址
console.log(form.file.value);
// 获取选中选中文件的信息，可以通过此方法读取信息进行提交前验证
console.log(form.file.files[0]);
//返回的结果是File {name: '1.webp', lastModified: 1679916062000, lastModifiedDate: Mon Mar 27 2023 19:21:02 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 29298, …}
按钮
因为表单元素只有设置name值，表单提交时才会参与提交，否则不参与提交。
各种按钮本身的值是不需要提交的，因此不需要设置name。
多行文本框：没有value值，但是可以通过value值获取
css选择器
1.css定义
（1）css层叠样式表
（2）页面是样式层层叠加出来的效果，页面的最低端成为页面的文档流，默认所有的标签都在文档流中
（3）css可以对页面中的标签进行样式修饰
字体颜色、大小、背景
页面元素进行布局
布局：页面中那个元素如何摆放的问题，解决页面中元素水平放置
2.css语法
选择器{
样式名称:样式值;
}
3.css位置
（1）行内样式
在html标签中使用style属性引用样式
作用范围：当前使用的标签
（2）内部样式
使用style标签，引用css样式，style标签位置通常在head标签中
作用范围：当前页面
（3）外部样式
创建css文件，在html文件中引入css文件
引入方式：
方式一：
<link rel="stylesheet" href="css文件地址">
方式二：
在style标签中写入
@import url('css文件地址');
区别：
link标签属于xhtml，@import属于css2.1
使用link连接的css文件先加载到页面中，再进行编译；使用@import导入css文件，客户端显示html结构，再把css文件加载到网页中
@import属于css2.1特有的，对不兼容css2.1的浏览器是无效的
4.css基本选择器
（1）标签选择器
使用html中标签作为选择器，当前页面中与标签相匹配的所有元素均选中。
标签{
样式名称：样式值；
}
（2）id选择器
选中标签中指定id值，作为选中元素
页面中的id值具有唯一性
<style>
#id值{
}
</style>
<body>
<p id="id值"></p>
</body>
（3）类选择器
在html标签中的使用class属性对标签进行逻辑分类，可以任务class值一样归为一类，即class属性值可以相同
语法：
. + class值 {
样式名称：样式值;
}
（4）层次选择器
标签之间存在层次关系：子父关系，祖先关系， 后代元素，兄弟
①后代选择器
选择器1 + 空格 + 选择器2 {
样式名称：样式值;
}
简写： 选择器1 选择器2 …
②子元素选择器
选择器1 > 选择器2 …{
样式名称：样式值;
}
③相邻后兄弟选择器
选择器1 + 选择器2 …{
样式名称：样式值;
}
④后通用兄弟选择器
选择器1 ~ 选择器2 …{
样式名称：样式值;
}
⑤并集选择器
选择器1, 选择器2, … {
样式名称：样式值;
}
⑥交集选择器
选择器1选择器2… {
样式名称：样式值;
}
⑦通配符选择器
*{
margin: 0;
padding: 0;
}
（5）属性选择器
选择器[属性名称] ： 指定属性名称
选择器[属性名称=‘属性值’] ： 指定属性名称和属性值, 属性值必须完全匹配
选择器[属性名称*=‘属性值’] ： 指定属性名称和属性值, 包含属性值，属于模糊查询
选择器[属性名称^=‘属性值’] ： 指定属性名称和属性值, 属性值开头
选择器[属性名称$=‘属性值’] ： 指定属性名称和属性值, 属性值结尾
（6）结构伪类选择器（层次伪类选择器）
①判断方式
- 层级
- 位置
- 类型匹配（选择器）
②分类
:first-child 当前层级下的，第一位置中类型匹配的元素
:last-child 当前层级下的，最后一个位置中类型匹配的元素
:nth-child(n) 当前层级下的，第n个位置中类型匹配的元素
n取值的特殊值：odd：奇数 even：偶数 自定义公式，如2n+1、2n-1
选择步骤：先位置后类型
:first-of-type 当前层级下的，所有匹配类型中第一个位置的元素
:last-of-type 当前层级下的，所有匹配类型中最后一个位置的元素
:nth-of-type(n) 当前层级下的，所有匹配类型中第n个位置的元素
选择步骤：先类型后位置
（7）伪元素选择器
- ::first-letter 第一个字符
- ::first-line 第一个行
- :before 在指定标签的内容之前添加内容，可修饰
- :after 在指定标签的内容之后添加内容，可修饰
属性：content:”内容“，通过content添加内容，可以为空
语法：
选择器:befor/after{
content:"内容";
样式：样式值
}
伪类的内容在dom中不体现
- a:link a标签未被访问过的样式
- a:visited a标签被访问过后的样式
- a:hover 鼠标悬停时的样式
- a:active 鼠标长按时的样式
以上4个伪类的优先级相同
悬浮状态和点击状态不能互换，如果互换则active状态样式则
失效
link，visited整体和hover 、active不能互换，不能互换，如
果互换则hover和active消失
（8）否定伪类选择器
作用：在已选定的样式中排除某些样式
语法：
选择器：not（选择器）{
样式名称：样式值；
}
（9）选择器优先级
使用不同的选择器选择同一个元素，样式属性名称相同，属性值不同，如何让显示取决于选择器的优先级即样式的权重。
通配符选择器（0）<标签（元素）选择器（1）<类选择器和伪类选择器（10）<id选择器（100）<行内样式（1000）< ！important
提高优先级 在样式值后加！important
子元素继承父元素样式，但不继承优先级
交集选择器优先级累加；权重累加不会超过当前层级 如：类选择器的权重最大值为99
并集选择器优先级不会累加
选择器权重相同，最后设置的起作用
（10）样式继承
描述：
在html层次结构中，后代元素会继承祖先元素样式
不是所有样式都能被继承 如：背景
css样式
字体样式
-
字体类型：font-family
-
字体大小：font-size
-
px：像素 默认字体大小（16px）
-
%：百分比，相对于父元素字体大小
-
em：相对单位，相对于父元素字体大小
rem：1父元素字体大小
-
-
字体样式：font-style
可选值：normal正常、italic倾斜、oblique斜体
字体倾斜：font-style:oblique;
-
字体加粗：font-weight（默认400）
字体图标
一种可以缩放的矢量图，可以定制大小，颜色等任何css修饰
使用步骤：
1、进入阿里巴巴矢量图标库官网注册需要使用的icon图标将加载的
2、将加载的iconfont.css和iconfont.ttf文件导入当前工程下的同一个文件夹中
3、同link标签引入inconfont.css文件
4、页面中通过class使用
鼠标形状
增加交互
cursor属性：设置鼠标悬浮状态，增加交互性
可选值：pointer超链接、crosshair十字形状
文本样式
-
颜色：color
-
水平对齐：text-align：块级元素
-
首行缩进：text-indent
-
行高：line-height 行高=元素高度：垂直居中
-
文本装饰：text-decoration
-
垂直对齐：vertical-align：行内元素
-
阴影：text-shadow
-
超出是否换行：word-break
可选值：break-all打断换行，keep-all超出不换行
-
text-overflow:超出部分显示三个点
前提word-break：keep-all;overflow:hidden;
文本阴影
语法：
text-shadow:h-shadow v-shadow blur color;
h-shadow：水平阴影位置，正数右移，负数左移
v-shadow：垂直阴影位置，正数下移，负数上移
blur：模糊的距离
color：阴影颜色
伪类样式
伪类：表示元素的状态
语法：标签+状态
a标签状态
a：link，访问前
a：visited，访问后
a：hover，鼠标悬停
a：active，鼠标按下
顺序不改变，改变后有些样式失效
p等其他标签状态
p：hover，鼠标悬停
p：active，鼠标按下
列表样式
【ul li中间距默认40】
- list-style-type:样式类型
可选值：none无标记、cicle空心圆、square实心方块、decimal数字disc实心圆（默认）
-
list-style-image url=“图片地址”:列表图片
-
list-style-position:列表图片位置
可选值：inside li内、outside li外（默认）
简写：list-style: none url(‘./img’) inside 不提倡
type值 image值 position值无顺序
背景样式
-
背景颜色：background-color：颜色值
特殊值：transparent 透明
-
背景图像：background-image：url(“图片地址”)
当背景图片小于元素尺寸时，默认平铺
当背景图片大于元素尺寸时，默认显示图片左上角（部分图片）
背景图片可以设置两个
-
平铺方式：background-repeat：
可选值：no-repeat不平铺、repeat-x 沿着x轴平铺、repeat-y 沿着y轴平铺
-
背景位置：background-position：（xpos，ypos）
可选值类型：
- px像素
- 关键字：left、right、top、bottom、center(水平+垂直)
- 百分比%
-
背景大小：background-size
可选值：auto默认、百分比或像素自定义设置大小、cover填充、contain等比例放大
-
背景参照点：background-origin
- 默认定位参照点是内边距左上角：padding-box
- border-box参照点是边框左上角
- content-box参照点是内容左上角
-
背景显示区域：background-clip(同时可以修改背景颜色)
- border-box：背景填充的范围是从边框开始（默认）
- padding-box：
- content-box：多出的地方被删掉
-
背景定位：background-attachment
- fixed：相对文档位置固定
渐变样式
线性渐变
语法：
background-image：linear-gradient（direction，color-stop1，color-stop2,…）
前缀表示兼容性
direction：方向 默认从上到下
取值：角度值、top…
特殊值：to left、right、top、bottom
color-stop1，color-stop2：起点和结束点颜色，可以多个值
镜像渐变
从中心向四周渐变
background-image: repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);重复镜像渐变
盒子模型
盒子模型
页面中的任何元素均可以看作一个四边形的盒子，被称为盒子模型
1、盒子的构成
内容：content（文本、子元素）
内边距：padding（内容到边框之间的距离）
边框：border
外边距：margin（盒子之间的距离或合资的页面边框之间的距离）
2、盒子可视区域
构成：内容+内边距+边框
内容，内边距，边框影响可视区域大小
3、外边距影响盒子的位置
left、top 影响盒子本身的位置
right、bottom 影响兄弟盒子的位置
如何摆放元素在页面中的位置，称为布局，外边距影响盒子的位置可以进行小范围布局使用
（大范围布局依靠浮动）
平时设置的宽高在”标准盒子模型“中不是盒子本身的大小，是盒子内容大小
盒子的大小=内容+内边距+边框+外边距
盒子边框 border
1、属性
- border-color：边框颜色 默认黑色
- border-width：边框大小（粗细/宽度） 默认3px
- border-style：边框样式
取值：solid实线、dashed虚线、dotted实心圆点、double双行线、none无边框
- boeder-radius：圆角边框
可以设置不同值，代表不同的方向；一个值：四个角、两个值：左上右下，右上左下（对角线）、三个值：左上，右上左下，右下、四个值：顺时针
2、可以设置不同值，代表不同的方向；一个值：上下左右、两个值：上下，左右、三个值：上，左右，下、四个值：顺时针
3、不同方向和不同属性可以随意组合 如：border-top-width：上边框的宽度
4、简写：border：样式 宽度 颜色 其中样式、宽度、颜色没有顺序要求
5、单独设置边框：border-方向：样式 宽度 颜色
盒子外边距 margin
（移动盒子）
1、定义：外边距用来设置盒子与盒子之间的距离或盒子与页面边框之间的距离
2、设置盒子外边距，不影响盒子可视区域大小，影响位置
3、盒子默认位置在左上角
4、设置margin-top、magin-left移动盒子本身位置
设置margin-right、margin-bottom移动兄弟盒子位置
5、外边距可以设置为负数
6、特殊值：auto
水平方向auto表示最大值，垂直方向auto则为0
margin-left：auto 距离左边最大值
margin-right：auto 距离右边最大值
同时设置则在父元素中居中显示，值本身水平居中。条件：块元素+固定宽度
7、可以设置不同值，代表不同的方向；一个值：上下左右、两个值：上下 左右、三个值：上 左右 下、四个值：顺时针
盒子内边距 padding
（移动盒子内元素,设置padding可视区域变大）
1、内边距影响可视区域大小，元素的背景会延伸到内边距
2、可以设置不同值，代表不同的方向；一个值：上下左右、两个值：上下 左右、三个值：上 左右 下、四个值：顺时针
3、当元素没有设置宽度，则默认与父元素相同，可使用padding-left改变内容的位置（盒子模型中的位置）相当于首行缩进
标准盒子宽度：margin+border+padding+width
标准盒子高度：margin+border+padding+height
盒子可视化大小：border+padding+height/width
清空默认设置
*{
magin：0;
padding:0
}
非标准盒子模型
盒子模型规定了元素在页面中占据空间大小的计算方式
box-sizing可以改变盒子模型
可选值：content-box：标准盒子模型（默认值）
border-box：非标准盒子模型也称怪异盒子模型也称IE盒子模型
1、标准盒子模型：
（默认为标准盒子模型）
width和height是盒子模型中内容的大小，设置padding和border可视区域变大
（设置magin改变位置）
2、非标准盒子模型
设置width和height锁定盒子可视区域大小，设置padding和border时内容会压缩
使用场景：小范围元素需要锁定盒子大小时使用
盒子阴影
box-shadow：h-shadow v-shadow blur spread color inset;
- h-offset:X轴位移，指定阴影水平位移量
- v-offset:Y轴位移，用来指定阴影垂直位移量
- blur-radius:可选 阴影模糊半径阴影向外模糊的模糊范围
- spread：可选。阴影的大小
- color:阴影颜色，定义绘制阴影时所使用的颜色
- inset：可选。从外层的阴影（开始时）改变阴影内侧阴影
外边距重叠
1.页面中相邻元素的垂直方向会发生外边距重叠现象
2.重叠条件：外边距相邻、垂直方向
3.外边距重叠使用兄弟元素的相邻外边距最大值
4.解决方式：相邻元素之间添加table标签，缺点：出现冗余标签
外边距传递
1.如果子元素的垂直外边距和父元素的外边距相邻，则会发生外边距传递现象
2.传递条件：子父元素的外边距相邻、垂直方向
3.解决方式：
-
父元素添加边框，缺点：改变盒子大小
-
父元素添加内边距，缺点：改变盒子大小
-
父元素内子元素上添加table标签，缺点：出现冗余标签
-
使用伪类方式添加table
.clearfix::before { content: ""; display: table; }
内联盒子
1.盒子模型的构成：内容+内边距+边框+外边距
2.内联盒子：盒子模型中用到行内元素
（1）内容区：行内元素默认宽高不起作用
（2）内边距即填充：
设置水平内边距起作用，影响文本内容位置（即影响布局)
设置垂直内边距起作用，不影响文本内容位置（即不影响布局)
（3）边框：
设置水平边框（左右边框）起作用，影响文本内容位置（即影响布局）
设置垂直边框（上下边框）起作用，不影响文本内容位置（即不影响布局)
（4）外边距：
设置水平外边距起作用，影响文本内容位置（即影响布局）
设置垂直边框外边距不起作用
flex布局-弹性盒子
flex布局时css3新增的专门用于布局的样式。
在弹性盒子的世界里，当我们为父元素设置他为弹性盒子时，他的子元素自动变成弹性子元素。
在弹性盒子的世界里，不区分上下左右。当一个弹性盒子里的弹性子元素设置margin：auto；子元素水平垂直均居中。
默认情况下，弹性盒子存在一个主轴，这个主轴方向是水平向右。
侧轴时垂直于主轴，方向向下或向右。
属性：
- flex-direction:设置主轴方向
- 可选值：
- row:水平向右
- row-reverse：水平向左
- column：垂直向下
- column-reverse：垂直向上
- 可选值：
- justify-content：设置弹性子元素在主轴上的排列方式
- 可选值
- flex-start：起点对其
- flex-end：终点对其
- center：居中
- space-between：每两个弹性子元素距离一样
- space-around：每个子元素两侧距离相等
- space-evenly：平均
- 可选值
- align-items：设置主轴在侧轴方向上的排列方式
- 可选值
- stretch：拉伸（默认值）
- baseline：基线对齐
- center：居中
- flex-start：起点对其
- flex-end：终点对其
- 可选值
- align-self：子元素中使用，用来覆盖整体的align-items。可选值同上
默认的，弹性盒子是的单行状态（单行状态下，如果内容溢出，则会产生挤压效果）。可以设置弹性盒子为多行状态。
- flex-wrap：设置弹性盒子换行
- 可选值
- nowrap：不换行
- wrap：正向换行
- wrap-reverse：反向换行
- 可选值
- align-content：规定多行状态下，主轴在侧轴上的排列方式
- flex-flow：flex-direction和flex-wrap缩写
- order：设置在弹性子元素上，可选值为数字，用来设置弹性子元素出场顺序
- flex：
- 可选值：数字，1表示百分百
- flex-grow：最大可以使用大小
- flex-shrink：最小可以使用大小
- flex-basis：当前默认使用大小
浮动
1、标准文档流
1.定义：默认所有标签均在页面的最底层放置，该位置称为页面的文档流
2.特点：
（1）块元素：
- 默认在文档流中独占一行
- 可设置宽高，默认宽度与父元素宽度相同，高由内容撑开
（2）行内元素：
- 默认设置宽高不起作用
- 元素大小右内容撑开
- 元素默认水平放置，如果一行放置不下，则自动换行
3.块元素可以包含行内元素，行内元素不能包含块元素
2、显示框类型
1.元素中默认框类型，如div为块类型，span为行类型，通过display可以改变元素框类型
2.display可选值：block 块元素；inline 行内元素；inlin-block 行内块元素；none 隐藏
（1）当块元素设置为inline时–将块元素变成行内元素
- 默认设置宽高不起作用
- 元素大小右内容撑开
- 元素默认水平放置，如果一行放置不下，则自动换行
（2）当行内元素设置为block时–将行内元素变为块元素
- 可设置宽高
- 独占一行
（3）当元素设置为inline block时–设置为行内块元素
- 可设置宽高
- 不独占一行
inline 使用在水平布局中，没有脱离文档流–水平放置后默认存在4px间距
取消间距方式：
方式一：
html{
font-size：0;
}
方式二：
margin-left：-4px;
（4）当元素设置为none时–隐藏且不保留位置
visibility：hidden；–隐藏但保留位置–>
visibility：visiable；–显示
3、浮动
1.块元素默认在文档流中独占一行、垂直排列，若想让块元素水平排列，可通过浮动让元素脱离文档流
2.使用float属性，值为非none，元素脱离文档流
3.float可选值：
none：不浮动，在文档流中
left：元素左浮动，脱离文档流
right：元素右浮动，脱离文档流
3.浮动特性（脱离文档流特性）：
（1）设置元素float为非none，元素脱离文档流，意味着在文档流中的特性改变
（2）元素脱离文档流，相邻兄弟元素上移
（3）块元素浮动后，默认宽度消失，大小由内容撑开可设置宽高
行内元素浮动后，可设置宽高
（4）元素浮动后会向左上或右上移动，直到遇到父元素或其他浮动元素的边框，停靠该位置
（5）浮动元素上面有未浮动的块元素，则浮动元素不会超过块元素
（6）浮动元素会自动换行
（7）浮动元素不会超过前面浮动的兄弟元素
（8）浮动元素不会覆盖后面兄弟元素文本和图片，实现环绕效果
（9）浮动后使用margin属性，以浮动后的位置为标准改变位置
4、高度塌陷
1.父元素没有设置高度时，高度由子元素撑开
当子元素浮动时，子元素会脱离文档流，此时子元素将不会撑开父元素，父元素发生高度塌陷现象。
2.解决方式
（1）父元素设置高度。缺点：高度不能自适应
（2）在子元素下添加table或div元素，并清除浮动。 缺点：存在冗余标签
（3）伪类
父元素::after{
content:"";
display:table;
clear:both;
}
（4）父元素设置：overflow:hidden;缺点：超出部分隐藏
5、清除浮动
1.浮动元素对当前浮动的影响，本身还可以设置浮动
2.clear：清除浮动
可选值：none 不清除、left 左浮动对当前元素的影响、right 右浮动对当前元素的影响、both 两侧浮动对当前元素的影响
3.当左右两侧浮动对当前元素影响不同的时，以影响大的为主
6、溢出处理
1.溢出：当子元素大小超过父元素，会发生溢出现象
2.溢出的元素可通过overflow（默认）显示
3.默认溢出的元素呈现在父元素之外
4.overflow属性
可选值：visible 显示；hidden 隐藏—也可解决高度塌陷问题，BFC特性；scroll 滚动条（水平垂直均显示）；auto 自动（水平超出，显示水平滚动条；垂直超出，显示垂直滚动条）
7、inline-block和float区别
float脱离文本流
定位
1.定义：将元素放置到页面中的指定位置
2.属性：position
可选值：static（静态的） 无定位 默认值；relative 相对定位；absolute 绝对定位；fixed 固定定位
3.开启定位：position的值为非static
（1）通过top、left、bottom、right四个属性设置位置
（2）通常使用水平+垂直两个方向确定元素位置
（3）不同的定位方式，参考的原点（0，0）不同
相对定位relative
1.元素开启相对定位但未设置偏移量，元素不会移动
2.未浮动时定位，相对于元素初始位置(文档流位置)进行定位
浮动后定位，相对于元素浮动后位置进行定位
3.相对定位的元素不会脱离文档流，原始位置保留
4.相对定位提升一个层级
5.相对定位元素由上到下依次提高层级（默认状态，可更改）
6.相对定位元素不会改变元素的框类型（块元素依然是块元素，行内元素依然是行内元素）
绝对定位absolute
1.绝对定位的元素会脱离文档流
2.元素开启绝对定位但未设置偏移量，元素默认位置不变
3.绝对定位的参考点为最近的开启定位的祖先元素
4.若祖先元素没有开启定位则以页面（body）的左上角为参考点
[页面不等于窗口]
5.绝对定位提升一个层级
6.绝对定位元素由上到下依次提高层级（默认状态，可更改）
7.绝对定位元素会改变元素的框类型
块元素默认宽度消失，大小由内容撑开，可以设置宽高
行内元素可设置宽高
8.当子元素绝对定位时，子元素会脱离文档流，此时子元素将不会撑开父元素，父元素发生高度塌陷现象。
固定定位fixed
1.固定定位是特殊的绝对定位
2.相同点
(1)脱离文档流
(2)不设置偏移量时，默认位置不变
(3)会提升元素层级
3.不同点
absolute：若祖先元素没有开启定位则以页面（body）的左上角为参考点（即随滚动条移动）
fixed：以窗口的左上角为参考点（即不随滚动条移动）
粘性定位
固定导航栏：sticky
元素层级
1.一旦开启定位，元素离开层级
2.默认层级：从上往下依次提高
3.z-index设置元素层级，值越大，层级越高
4.没有开启定位则不能设置层级
5.无论如何提高父元素层级，也不能高于子元素层级
透明度
两种添加透明度方法：
方法一：rgba（0，0，0，0）第四个0表示透明度
方法二：opacity：0；
opacity 取值：0~1之间 1表示不透明，0表示透明 中间过渡
BFC(Block Formatting Content)
1.css2.1提出的概念，页面中的一块渲染区域
2.满足如下任一条件可以创建一个渲染区域（BFC）
（1）根元素
（2）脱离文档流的元素（浮动、绝对定位、固定定位）
（3）非块级元素（display值为inline-block、table，flex等）
（4）overflow属性不是visiable的块元素
3.开启bfc的元素标签后的影响
（1）父元素的垂直外边距不会和子元素重叠（解决外边距传递问题)
（2）开启bfc的元素不会被浮动元素覆盖
（3）开启bfc的父元素可以包含浮动元素（解决塌陷问题）
4.开启bfc
（1）设置元素浮动
（2）设置元素定位（绝对定位、固定定位）
（3）设置元素display值为inline-block…
（4）设置overflow的值为非visiable
5.同一个bfc和不同bfc之间的定位方式会发生改变
6.（1）bfc解决塌陷问题
开启bfc的父元素可以包含浮动元素
父元素设置 overflow：hidden;副作用小
（2）bfc解决外边距传递问题
父元素的垂直外边距不会和子元素重叠（即为不相邻)
父元素设置overflow的值为非visiable
（3）bfc解决外边距重叠问题
父元素的垂直外边距不会和子元素重叠
兄加一个父元素，兄的父元素设置 overflow：hidden;开启bfc
（4）bfc解决元素覆盖问题
开启bfc的元素不会被浮动元素覆盖
被覆盖的元素设置overflow的值为非visiable或浮动，开启bfc
css3
变换
1、2D变形
（1）变形函数：transform（x、y）
transform：translate()平移
transform：scale(倍数)缩放
transform：skew(倾斜度数deg)倾斜
transform：rotate(旋转度数deg)旋转 默认按照z轴旋转，中心点为中间
（2）中心原点：若不设置，默认为中心点，设置后，（0，0）点为左上角
transform：origin（x，y，z）
水平方向可取值：left center right
垂直方向可取值：top middle bottom
谁动给谁设置中心点
2、过渡
1.从一个状态过渡到另一个状态的过程
2.transition：property duration timing-function delay;
过渡属性（ transition-property ）
● 定义转换动画的CSS属性名称
● IDENT：指定的CSS属性（width、height、background-color属性等）
● all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
过渡所需的时间（ transition-duration ）
● 定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
过渡动画函数（ transition-timing-function ）
● 指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
● ease：速度由快到慢（默认值）
● linear：速度恒速（匀速运动）
● ease-in：速度越来越快（渐显效果）
● ease-out：速度越来越慢（渐隐效果）
● ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间（ transition-delay ）
● 指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
● 正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
● 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
● 0：默认值，元素过渡效果立即执行
3、3d动画
transform：perspective 景深
可以设置在本身的transform：perspectiv()位置，或设置在父元素下：perspectiv:()
元素离视图的距离
若perspective设在transform位置，必须设置为第一个参数，否则失效
动画
- 定义动画：定义动画的关键帧
@keyframes 动画名称{
0%{
}
......
100%{
}
}
2.使用动画：animation: name duration timing-function delay iteration-count direction fill-mode;
- 动画名称：(name)
- 动画时间:（ duration）
- 动画方式:（timing-function）
- linear:动画从头到尾的速度是相同的。
- ease:默认。动画以低速开始，然后加快，在结束前变慢
- ease-in:动画以低速开始。
- ease-out：动画以低速结束。
- ease-in-out：动画以低速开始和结束。
- 延迟时间: (delay)
- 动画播放次数：（iteration-count） 值通常为整数，默认值为1次播放
- 动画的播放方向（animation-direction）
- normal，动画每次都是循环向前播放
- alternate，动画播放为偶数次则向前播放
- 动画的播放状态（animation-play-state）
- running将暂停的动画重新播放
- paused将正在播放的元素动画停下来
- 动画发生的操作（animation-fill-mode）
- forwards表示动画在结束后继续应用最后关键帧的位置
- backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
- both表示元素动画同时具有forwards和backwards的效果
js
1.基础
（1）js在浏览器中的作用：对页面中的html和css进行CRUD(增删改查)操作
（2）js是嵌入式语言
（3）网景公司第一次提出javascript
2.js组成：基本语法 + 标准库 + 宿主环境 API
语言规范：ECMAScript
宿主环境：BOM(操作浏览器)+DOM(操作html+css)
浏览器环境、服务器环境
标准库：
3.执行原理
渲染引擎—执行html和css
js引擎—执行js，将js语言解析成二进制并执行
4.js在页面中的位置
（1）行内：html标签中，通过事件和标签进行关联
注意：
绑定js
<a href="javascript:alert('被点击');"></a>
去掉a默认点击
<a href="javascript:;"></a>
（2）script标签中，script标签本身可以在页面中任意位置,页面中可以把包含多个script
执行顺序：从上到下
（3）js文件中，需要和html文件链接
链接：
<script src="文件名.js"></script>
5.代码结构
（1）js语言每行称为一个语句，使用分号结束，可省略
（2）分号
（3）注释：对代码进行解释说明
- 单行注释 // 快捷键 ctrl+/
- 多行注释 /* */
- 注释不能嵌套！！！
6.js输出内容
js为解释性语言，边解释边执行，按照先后顺序执行
（1）警告框：浏览器使用函数
alert(“输出内容”) \n 换行 空格
（2）控制台
console.log 控制台输出信息
console.group(“”)分组名称
console.log(“内容”)分组内容
console.groupEnd()分组结束
\n换行 \t tab键，制表符
console.table(数组名) 以表格形式输出数组信息
（3）页面
document.write(“<标签名>内容</标签名>”)
换行：br 空格： 
数据类型
1.基本数据类型(直接存储数据)：栈
-
Number:数字类型----包括整型和浮点型，可以进行多种操作。特殊值：Infinity正无穷，NaN不是一个数值
-
BigInt：大整数类型----表示任意长的整数，数值后面加n代表BigInt类型
-
String:字符串
-
表示方式：单引号、双引号、反引号
注意：同类型不能嵌套
\ 表示转义 \n 换行 \t制表位
-
字符串中取出字符：message[下标]
-
-
Boolean:布尔类型
-
Null: 空值类型----typeof null返回object
-
Undefined:未定义
-
symbol类型。唯一性
2.引用数据类型(间接存储数据)：堆
Object对象类型（对象、数组、函数：object、array、function、Math、regexp、date）
typeof
typeof：以字符串形式返回变量的数据类型
可以当运算符使用，也可以当作函数使用
浏览器函数
alert：警告框
prompt（message，default）：输入框
prompt带有文本框的警告框
message提示输入的信息同时返回输入的信息（类型为string）若未输入信息点击确认返回空字符串；点击确认返回null
default默认值，可省略
confirm(‘提示信息’)：带有提示信息的确认框
点击确认返回true，点击取消返回false
运算符
运算元：运算符应用的对象
一元运算符：只有一个运算元，如自增自减
二元运算符：两个运算元
三元运算符：三个运算元
表达式：变量 + 运算符（可省略），表达式一定有返回结果
算术运算符
+加-减*乘/除 %取余 **幂
字符串+任意类型变成字符串，此时+是连接符
一元运算符：+ -
运算符优先级：
一元>二元
乘 / > + -
非 > 与 > 或
()最高
=最低
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czFQVvN2-1683339581741)(./img/运算符优先级.png)]
自增自减
后加加：先赋值后运算
前加加：先运算后赋值
位运算符：异或
关系运算符：
逻辑运算符：
与或非 ？？空值合并运算符
|| 寻找第一个真值，没有真值时返回最后一个值
短路求值：遇见true后面不执行
三元运算符：条件表达式？表达式1：表达式2 条件表达式为真返回1，条件表达式为假返回2
三元运算符可以嵌套
随机数：Math.random() 范围[0,1）
流程控制：程序按照自定义的逻辑进行运算
顺序结构
选择结构：
if switch
if 分支 只关心正确与否
if条件为非布尔类型，会自动转换为布尔类型
if-else 二选一
If-else if 多选一：只执行一个代码块
if嵌套
switch-case break：若没有break程序将不进行检查
循环结构：
while do-while for
while循环：先判断再执行
while(循环条件){
循环体
}
debugger；设置断点
do-whie循环:先执行再判断—至少执行一次
do{
循环体
}while(循环条件)
for循环：先判断再执行—通常循环次数确定
for(初始值;循环条件;迭代){
循环体
}
break可以使用到switch和循环中
break使用到循环中会结束当前循环
影响：循环次数可能没有执行那个完成，break之后的语句没有机会执行，一般搭配if使用
continue：continue之后的语句没有机会执行，加快循环，不影响循环次数
只能用于循环中，跳出循环体中剩余的语句，执行下一次循环
双重循环
函数：function
作用：封装–根据功能讲代码进行分类管理和包装，封装业务代码，可重复使用。
包括：变量、数据类型、运算符、流程控制
定义函数：function 函数名–声明；函数名()—使用函数
function 函数名(){
函数体；
}
函数名()或 函数名(参数)
局部变量：变量声明在函数内部则称为局部变量；作用域：当前函数
全局变量：变量声明在函数外部则称为外部变量或全局变量；
函数对外部变量拥有全部访问权限（修改、使用）
声明函数相当于在全局范围中创建了一个与函数名相同的变量，变量的值指向函数本身
局部变量与全局变量重名时，优先使用局部变量。
函数参数：设计函数时可以通过参数，给函数进行任意数据传递
function 函数名(参数 = 默认值，...){//此参数为形参，可加默认值，避免出现undefined
函数体；
}
函数名(参数)//次参数为实参
设计参数意味着函数内部需要对参数进行处理
函数的参数即函数声明的局部变量
形参：函数声明时的变量
实参：调用函数时，传递给函数的值成为实参
调用函数时，实参的个数和类型没有限制
返回值：return
将一个值返回到调用代码中作为结果
function 函数名称(){
return 值（值可省略）
}
一个函数中可能出现多个return
return可以出现在函数内任意位置；当执行到该位置，函数停止并将值返回给调用代码
空return或无return，函数返回值均为undefined。
返回值为一个变量，如需返回多个值使用数组。
函数表达式
let 变量名 = function(参数){
函数体；
}
函数变量名()
函数保存在堆中，复制函数时是复制地址值
回调函数：其中yes、no即为回调函数
回调函数
语法：作为另一个函数的参数存在的函数
含义：当一个函数执行完需要调用的函数
//question：字符串类型；yes：函数类型的形参；no：函数类型的形参
function ask(question,yes,no){
if(confirm(question)){
yes()
}else{
no()
}
}
//使用表达式
let yes = function(){
alert("同意")
}
let no = function(){
alert("不同意")
}
let question = "是否同意"
ask(question,yes,no)//实参
匿名函数:没有名字的函数，在三元运算符里使用，单独使用时报错。
声明和表达式的区别
1.语法不同
2.声明之前之后均可被调用，（js引擎提前加载声明方式定义的函数）；表达式在创建函数之前不能被调用
3.在严格模式下，函数声明方式有块级作用域
箭头函数
let 函数名 = (参数1，参数2) => {函数体}//省略function
只有一个参数，括号可省略；空参不能省略()
函数体只有一句，{}可以省略，若省略{}则return必须省略
函数对象
arguments：表示函数调用的所有参数
对象：object
作用：对象用来存储键值对和更复杂的数据实体；（对象用来存储带有关联数据的集合）
语法：
let 变量名 = {
key：value,
key：value,
。。。
}
key：string类型
value：可以是任何类型，包括函数、数组、对象
将函数放在对象里，称为方法
对象的声明+属性
let obj = new Object();//使用构造函数
let obj = {};//使用字面量
创建对象并同时添加数据：
let 变量名（对象名） = {
//属性名称：属性值，
key：value,
key：value,
。。。
}
添加数据:变量名.属性名 = 属性值
删除数据：delete 变量名.属性名
修改属性值:重新赋值 变量名.属性名 = 新的属性值
查看数据：变量名.属性名
方括号：
属性名有多个字符串组成不能使用点（.）操作符，需要使用[]
点（.）操作符要求key是有效的变量标识符
对象名[变量名]：取出变量名对应的值
属性存在测试:
属性名 in 变量名（对象名）：返回true表示存在 ，false表示不存在
循环遍历属性
for(let 变量名 in 对象名){
}
数组方法：
-
添加/删除元素：
- push(…items) —— 向尾端添加元素，
- pop() —— 从尾端提取一个元素，
- shift() —— 从首端提取一个元素，
- unshift(…items) —— 向首端添加元素，
- splice(pos, deleteCount, …items) —— 从 pos 开始删除 deleteCount 个元素，并插入 items。
- slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制进去。+
- concat(…items) —— 返回一个新数组：复制当前数组的所有元素，并向其中添加 items。如果 items 中的任意一项是一个数组，那么就取其元素。
-
搜索元素：
- indexOf/lastIndexOf(item, pos) —— 从索引 pos 开始搜索 item，搜索到则返回该项的索引，否则返回 -1。
- includes(value) —— 如果数组有 value，则返回 true，否则返回 false。
- find(func)/filter(func) —— 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值。filter返回一个新数组（不改变原数组）。
- findIndex(func) ： 通过 func 过滤元素，返回使 func 返回 true 的第一个值的索引
-
遍历元素：
-
forEach(func) —— 对每个元素都调用 func，不返回任何内容。
-
转换数组：
- map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
- sort(func) —— 对数组进行原位（in-place）排序，然后返回它。
- reverse() —— 原位（in-place）反转数组，然后返回它。
- split/join —— 将字符串转换为数组并返回。/数组转成字符串
- reduce(func, initial) /reduceRight(func, initial) —— 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果。从左到右/从右到左，initial：初始值，如果没有初始值，将第一个当作初始值。
-
其他：
-
Array.isArray(arr) 检查 arr 是否是一个数组。
请注意，sort，reverse 和 splice 方法修改的是数组本身。
-
every(fn)：检测数组元素的每个元素是否都符合条件。（与）
注意：
every() 不会对空数组进行检测。
every() 不会改变原始数组。
-
some(fn) 方法用于检测数组中的元素是否满足指定条件。（或）
注意：
some() 不会对空数组进行检测。
some() 不会改变原始数组。
-
arr.fill(value, start, end)—— 从索引 start 到 end，用重复的 value 填充数组。
-
arr.copyWithin(target, start, end)—— 将从位置 start 到 end 的所有元素复制到 自身 的 target 位置（覆盖现有元素）。
-
arr.flat(depth) 从多维数组创建一个新的扁平数组。depth：深度
-
arr.flatMap(fn)：先map，然后flat(1)
-
Array.of(element0[, element1[, …[, elementN]]]) 基于可变数量的参数创建一个新的 Array 实例，而不需要考虑参数的数量或类型。
-
Array.from(迭代器)：将迭代器转化为数组
-
arr.at(索引值)：获取对应索引的元素，索引值可以为负数
-
sass和less
css预处理语言
练习：
精灵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
width: 30px;
height: 30px;
/* 行内元素宽高无作用 */
display: inline-block;
/* 宽高起作用 */
background-image: url('./image/un_login_third.png');
}
/* 悬浮 */
a:nth-of-type(1):hover{
background-position: 0 -35px;
}
a:nth-of-type(2){
background-position: -35px 0;
}
a:nth-of-type(2):hover{
background-position: -35px -35px;
}
a:nth-of-type(3){
background-position: -70px 0;
}
a:nth-of-type(3):hover{
background-position: -70px -35px;
}
a:nth-of-type(4){
background-position: -105px 0;
}
a:nth-of-type(4):hover{
background-position: -105px -35px;
}
a:nth-of-type(5){
background-position: -140px 0;
}
a:nth-of-type(5):hover{
background-position: -140px -35px;
}
</style>
</head>
<body>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</body>
</html>
扩展
半圆、扇形、三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
float: left;
}
.d5{
width: 200px;
height: 200px;
border-radius: 0 0 100px 100px;
border: 1px solid #BECCC3;
background-color: #D0E9D4;
}
.d1{
width: 200px;
height: 200px;
border-radius: 100px;
border: 1px #BECCC3 solid;
background-color: #F5F5F5;
}
.d2{
margin: 10px;
width: 200px;
height: 100px;
border-radius: 0 0 100px 100px;
border: 1px red solid;
}
.d3{
width: 100px;
height: 200px;
border-radius: 100px 0 0 100px;
border: 1px red solid;
}
.d4{
width: 100px;
height: 200px;
border-radius: 0 100px 100px 0;
border: 1px red solid;
margin-left: 10px;
}
.d6{
width: 100px;
height: 100px;
border-radius: 100px 0 0 0 ;
background-color: red;
margin-left: 10px;
}
.d7{
width: 100px;
height: 100px;
border-radius: 0 100px 0 0 ;
background-color: red;
margin-left: 10px;
}
.d8{
width: 100px;
height: 100px;
border-radius: 0 0 100px 0 ;
background-color: red;
margin-left: 10px;
}
.d9{
width: 100px;
height: 100px;
border-radius: 0 0 0 100px;
background-color: red;
margin-left: 10px;
}
.c1{
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #ccc transparent transparent transparent;
}
.c2{
border-width: 10px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent #ccc transparent transparent;
}
.c3{
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #ccc transparent;
}
.c4{
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent #ccc;
}
</style>
</head>
<body>
<div class="d5">
<div class="d1"></div>
</div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d6"></div>
<div class="d7"></div>
<div class="d8"></div>
<div class="d9"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
