2020-11-14 学习笔记

---

前言

本次是学习笔记 如有错误之处 还请大佬指教 我很热爱编程 以后会更加细心的写博客 写更优质的博客！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、今日百度代码合集

1.定义和用法 element.addEventListener(event, function, useCapture)
addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

参数
event 必须。字符串，指定事件名。

注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

2.定义和用法 flex-direction:

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

flex-direction 属性规定灵活项目的方向。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

参数
row 默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse 与 row 相同，但是以相反的顺序。
column 灵活的项目将垂直显示，正如一个列一样。
column-reverse 与 column 相同，但是以相反的顺序。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
3.定义和用法 align-items:

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

参数
stretch
默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制.
center
元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start
元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end
元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline
元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

initial 设置该属性为它的默认值。请参阅 initial。
从父元素继承该属性。请参阅 inherit。
4.定义和用法 justify-content:

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

参数
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
5.定义和用法 box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

参数
content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

border-box
为元素设定的宽度和高度决定了元素的边框盒
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

6.定义和用法 onselect事件

onselect 事件会在文本框中的文本被选中时发生。

7.定义和用法 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow属性可以设置一个或多个下拉阴影的框

参数
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

8.当鼠标聚焦时输入框变色（focus事件实例）

9.定义和用法 outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
outline-color
outline-style
outline-width

10定义和用法 string.trim()
trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。
trim() 方法不会改变原始字符串。
trim() 方法不适用于 null, undefined, Number 类型。

参数
String 返回移除头尾空格的字符串。

11.定义和用法encodeURI(URIstring)
encodeURI() 函数可把字符串作为 URI 进行编码。

参数
URIstring 必需。一个字符串，含有 URI 或其他要编码的文本。

12.定义和用法setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

参数
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。

9.定义和用法 cursor:
一些不同的光标：

参数
url 需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。