(14.1.1)写给客户端同学的CSS和JS入门

一、CSS

• 每一个组件都支持
  • id 组件的唯一标示
  • class 样式类；
    • 支持传入多个，相当于叠加
  • style 内联样式
• 基础语法：selector {declaration1; declaration2; ... declarationN }，由两个主要的部分构成：选择器，以及一条或多条声明。
  • 选择器
    • 元素选择器：通常是您需要改变样式的 HTML 元素，譬如h1\h2\p。
    • 类选择器：自定义的class，以.开头在独立文件中定义样式，在 HTML 元素上使用class="xxx"
    • id选择器：自定义class,以3开头，在HTML 元素上使用id="xxx"；与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次
    • 属性选择器： 把包含标题（title）的所有元素变为红色，可以写作*[title] {color:red;}
    • 后代选择器： 只在作为指定元素后代的元素上应用，只对 h1 元素中的 em 元素应用样式，可以这样写h1 em {color:red;}
    • 子元素选择器
    • 相邻兄弟选择器
    • 以上类型可以组合使用,详细信息
  • 每条声明由一个属性和一个值组成。

1.1 盒模型

• 内容区域item
  • 宽高支持比例，表示占父容器的多少
• 内边距padding
  • 支持百分比，相当于父容器的比例
• 边框border
  • 边框绘制在“元素的背景之上” == 背景会在边框和padding和item区域内
  • 样式(线条的虚实线)、宽度和颜色
• 外边距margin
  • margin支持auto，表示居中
  • h1 {margin : 10px 10px 15px 15px;} 支持值复制 h1 {margin : 10px 15px;}

1.2 布局

CSS 有三种基本的定位机制：普通流、定位和浮动。

解决布局层面的问题，传统的解决方案是在盒模型形成的普通流基础上，使用依赖 display 属性 + position属性 + float属性， 对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。后期加入了Flex弹性布局

1.2.1 普通流和Display

• 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定
  • 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来
  • 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。
  • 由一行形成的水平框称为行框（LineBox），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度

1.2.1.1 块元素和行内元素

• 块元素（block）：独自占据一整行，或者多行，可以任意设置其大小尺寸
  • 总是另起一行（特立独行）
  • 可以设置其宽度、高度，内外边距
  • 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
  • 可以容纳行内元素和其他块元素
  • 是用于搭建网页布局的必须部分
  • 常见的块级元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素
  • 特殊：文字类的块级元素不能放块元素，例如<p>/<h1>~<h6>/<dt>
• 行内元素（inline）：也称为内联元素inline，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性
  • 总是和相邻的行内元素在同一行上（物以类聚）
  • 设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
  • 默认宽度是他自身内容的宽度。
  • 行内元素只能容纳其他行内元素或者文本。
  • 常见的行内元素：<span>\<em>
• 行内块元素（inline-block:在行内元素中就有那么几个特殊标签，比如<img>/<input>/<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素
  • 和相邻行内元素在同一行，但是之间会有空白缝隙。
  • 默认宽度是他本身内容的宽度。
  • 宽度、高度、行高、外边距以及内边距都可以手动设置
• html一切皆为框，默认从上到下的在页面里显示这些框,块元素绘制时体现为“块框”，行内元素体现为“行内框”， display 属性改变生成的框的类型
  • none: 让生成的元素根本没有框,这样的话，该框及其所有内容就不再显示，不占用文档中的空间
  • block: 通过将 display 属性设置为 block，可以让行内元素（比如 <a>元素）表现得像块级元素一样
  • inline: 默认。此元素会被显示为内联元素，元素前后没有换行符。
  • inline-block: 行内块元素
  • flex: 弹性布局

1.2.2 定位Position

• static
  • 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative
  • 支持数值和百分比
  • 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  • 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
• absolute
  • 支持数值和百分比
  • 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
    • 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，也就是视窗本身。
  • 元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed
  • 元素框的表现类似于将 position 设置为 absolute，不过其包含块一定是是视窗本身

1.2.3 浮动float

1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
3. 浮动后，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

• float 属性定义元素在哪个方向浮动
  • left 元素向左浮动
  • right 元素向右浮动
  • none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
  • inherit 规定应该从父元素继承 float 属性的值

需要注意的是： 浮动框旁边的行框会被自动缩短，从而给浮动框留出空间，行框围绕浮动框。要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

1.2.4 Flex 布局

• 任何一个容器都可以指定为 Flex 布局，display: flex;行内元素也可以使用 Flex 布局，display: inline-flex;
• 容器属性
  • flex-direction：决定主轴的方向
    • row（默认值）： 水平
    • row-reverse
    • column垂直
    • column-reverse
  • flex-wrap：如果一条轴线排不下，如何换行
    • nowrap（默认值
    • wrap
    • wrap-reverse
  • flex-flow：
    • 上边两个属性的简写 ||
    • 譬如 默认值为row nowrap
  • justify-content：在主轴上的对齐方式
    • flex-start（默认值）
    • flex-end
    • center
    • space-between两端对齐，项目之间的间隔都相等
    • space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • align-items： 在交叉轴上如何对齐
    • flex-start
    • flex-end
    • center
    • baseline 项目的第一行文字的基线对齐
    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • align-content：如果引发了换行，产生了多根轴线时，决定多根轴线的对齐方式；如果项目只有一根轴线，该属性不起作用。
    • flex-start：与交叉轴的起点对齐。
    • flex-end：与交叉轴的终点对齐。
    • center：与交叉轴的中点对齐。
    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch（默认值）：轴线占满整个交叉轴。
• 项目属性
  • order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
  • align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
    • flex-start（默认值）
    • flex-end
    • center
    • space-between两端对齐，项目之间的间隔都相等
    • space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • flex-grow
    • 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
    • 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
  • flex-shrink
    • 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
    • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
  • flex-basis
    • 定义了在分配多余空间之前，项目占据的主轴空间（main size）
    • 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    • 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
  • flex
    • 是flex-grow, flex-shrink 和 flex-basis的简写
    • 默认值为0 1 auto

1.3 转换

• CSS3 2D 转换 对元素进行移动、缩放、转动、拉长或拉伸
  • matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
  • translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
  • translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
  • translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
  • scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
  • scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
  • scaleY(n) 定义 2D 缩放转换，改变元素的高度。
  • rotate(angle) 定义 2D 旋转，在参数中规定角度。
  • skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
  • skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
  • skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
• CSS3 3D 转换
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
  • translate3d(x,y,z) 定义 3D 转化。
  • translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
  • translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
  • translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
  • scale3d(x,y,z) 定义 3D 缩放转换。
  • scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
  • scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
  • scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
  • rotate3d(x,y,z,angle) 定义 3D 旋转。
  • rotateX(angle) 定义沿 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
  • perspective(n) 定义 3D 转换元素的透视视图。

1.4 过渡和动画

• 过渡
  • transition 简写属性，用于在一个属性中设置四个过渡属性。 3
  • transition-property 规定应用过渡的 CSS 属性的名称。 3
  • transition-duration 定义过渡效果花费的时间。默认是 0。 3
  • transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
  • transition-delay 规定过渡效果何时开始。默认是 0。 3
• 动画
  • @keyframes 规定动画。 3
  • animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
  • animation-name 规定 @keyframes 动画的名称。 3
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
  • animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
  • animation-delay 规定动画何时开始。默认是 0。 3
  • animation-iteration-count 规定动画被播放的次数。默认是 1。 3
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
  • animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
  • animation-fill-mode 规定对象动画时间之外的状态。 3

1.5 样式

• 宽高
  • width\height 支持数值和百分比
  • max\min-width\height 支持设定最大最小，也同时支持数值和百分比
  • 需要注意的是，设置了最大高度后，意味元素在普通流中占据的最大高度会是设定值，不会超出占据，但是该元素的显示还是会正常显示，可能超出设定值； 布局和显示是两回事
    • overflow 属性规定当内容溢出元素框时发生的事情;
      • visible 默认值。内容不会被修剪，会呈现在元素框之外。
      • hidden 内容会被修剪，并且其余内容是不可见的。
      • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
      • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
      • inherit 规定应该从父元素继承 overflow 属性的值。
• 对齐
  • 块元素的对齐
    • 使用 margin 属性来水平对齐
      • margin: auto; 相当于设置了左右间距相同
    • 使用 padding 属性来垂直对齐
    • 使用 position 属性进行左和右对齐
    • 使用 float 属性进行左和右对齐
  • 文本
    • text-inden
    • text-align: center
• 定位 position
  • display 规定元素应该生成的框的类型。 1
  • position 规定元素的定位类型。 2
  • float 规定框是否应该浮动。 1
  • overflow 规定当内容溢出元素框时发生的事情。 2
  • clear 规定元素的哪一侧不允许其他浮动元素。 1
  • clip 剪裁绝对定位元素。 2
  • vertical-align 设置元素的垂直对齐方式。 1
  • visibility 规定元素是否可见。 2
  • z-index 设置元素的堆叠顺序。 2
  • cursor 规定要显示的光标的类型（形状）。 2
  • top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2
  • bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。
  • left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2
  • right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2
• overflow
  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。
• visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
• 外边距 margin
• 内边距 padding
• 边框
  • border-width 规定边框的宽度。参阅：border-width 中可能的值。
  • border-style 规定边框的样式。参阅：border-style 中可能的值。
  • border-color 规定边框的颜色。参阅：border-color 中可能的值。
  • border-image 设置所有 border-image-* 属性的简写属性。 3
  • border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
  • box-shadow 向方框添加一个或多个阴影。 3
    • h-shadow 必需。水平阴影的位置。允许负值。 测试
    • -shadow 必需。垂直阴影的位置。允许负值。 测试
    • blur 可选。模糊距离。 测试
    • spread 可选。阴影的尺寸。 测试
    • color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
    • inset 可选。将外部阴影 (outset) 改为内部阴影。
  • outline-color 规定边框的颜色。参阅：outline-color 中可能的值。
  • outline-style 规定边框的样式。参阅：outline-style 中可能的值。
  • outline-width 规定边框的宽度。参阅：outline-width 中可能的值。
• 背景
  • background 在一个声明中设置所有的背景属性。 1
  • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
  • background-color 设置元素的背景颜色。 1
  • background-image 设置元素的背景图像。 1
    • 渐变 background-image: linear-gradient(direction, color-stop1, color-stop2, …);
      • to bottom、to top、to right、to left、to bottom right
  • background-position 设置背景图像的开始位置。 1
  • background-repeat 设置是否及如何重复背景图像。 1
  • background-clip 规定背景的绘制区域。 3
    • border-box 背景被裁剪到边框盒。
    • padding-box 背景被裁剪到内边距框。
    • content-box 背景被裁剪到内容框
  • background-origin 规定背景图片的定位区域。 3
    • padding-box 背景图像相对于内边距框来定位。
    • border-box 背景图像相对于边框盒来定位。
    • content-box 背景图像相对于内容框来定位。
  • background-size 规定背景图片的尺寸。 3
    • 数值 或百分比
    • cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
    • contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
• 文本
  • color 设置文本的颜色。 1
  • direction 规定文本的方向 / 书写方向。 2
  • letter-spacing 设置字符间距。 1
  • line-height 设置行高。 1
  • text-overflow
    • clip|ellipsis|string
  • text-align 规定文本的水平对齐方式。 1
  • text-transform 控制文本的大小写。 1
  • text-overflow 规定当文本溢出包含元素时发生的事情。 3
  • text-shadow 向文本添加阴影。 3
  • text-wrap 规定文本的换行规则。 3
  • word-break 规定非中日韩文本的换行规则。 3
  • word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
  • text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
  • text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3
• 字体
  • font 在一个声明中设置所有字体属性。 1
  • font-family 规定文本的字体系列。 1
  • font-size 规定文本的字体尺寸。 1
  • font-size-adjust 为元素规定 aspect 值。 2
  • font-stretch 收缩或拉伸当前的字体系列。 2
  • font-style 规定文本的字体样式。 1
  • font-variant 规定是否以小型大写字母的字体显示文本。 1
  • font-weight 规定字体的粗细。 1
• 用户界面
  • box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3
    • box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中
  • appearance 属性允许您使元素看上去像标准的用户界面元素
    • normal 将元素呈现为常规元素。
    • icon 将元素呈现为图标（小图片）。
    • window 将元素呈现为视口。
    • button 将元素呈现为按钮。
    • menu 将元素呈现为一套供用户选择的选项。
    • field 将元素呈现为输入字段。
  • icon 将元素设置为图标等价物
• 多列
  • column-count 指定元素应该被分割的列数。
  • column-fill 指定如何填充列
    • balance 列长短平衡。浏览器应尽量减少改变列的长度
    • auto 列顺序填充，他们将有不同的长度
  • column-gap 指定列与列之间的间隙
  • column-rule 所有 column-rule-* 属性的简写
  • column-rule-color 指定两列间边框的颜色
  • column-rule-style 指定两列间边框的样式
  • column-rule-width 指定两列间边框的厚度
  • column-span 指定元素要跨越多少列
  • column-width 指定列的宽度
  • columns 设置 column-width 和 column-count 的简写

1.6 参考文献

• W3 School CSS
• W3 School CSS3
• 菜鸟联盟 CSS
• 行内元素和块元素以及行内块元素的特点
• Flex 布局教程：语法篇

二、JS

Js主要用于设定Html的业务逻辑，找到一个元素并改变它

- document.getElementById("demo")
    - x.innerHTML = "Hello JavaScript"  改变两个<x>和</xx>之间的内容
    - x.src='/i/eg_bulboff.gif'  改变props
    - x.src='/i/eg_bulboff.gif' 改变css样式
    - x.style.display="none"

• 位置
  • 必须位于 <script> 与 </script> 标签之间
  • 脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之
  • 引用外部脚本 <script src="myScript1.js"></script>
• 输出
  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
    • 例如 document.write(5 + 6);,在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
  • 使用 innerHTML 写入 HTML 元素
    • 例如 document.getElementById("demo").innerHTML = 5 + 6;更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
  • 使用 console.log() 写入浏览器控制台
• 语句
  • 以;分割
• 声明
  • 变量
    • 使用 var关键词来声明变量; =号用于为变量赋值
    • 不带有值的变量，它的值将是 undefined
    • JavaScript 拥有动态类型。这意味着相同变量可用作不同类型，也就是初始为数值的变量，后续可以改为字符串
    • 标识符
      • 名称可包含字母、数字、下划线和美元符号
      • 名称必须以字母开头
      • 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
      • 名称对大小写敏感（y 和 Y 是不同的变量）
      • 保留字（比如 JavaScript 的关键词）无法用作变量名称
    • 不通过关键词 var 创建的变量总是全局的，即使它们在函数中创建
  • 块作用域 let
    • 在{var x = 10; }块中，通过 var 关键词声明的变量没有块作用域,外部可以使用 x
    • 可以使用 let 关键词声明拥有块作用域的变量, 在块 {} 内声明的变量无法从块外访问
  • 常量 const
• 基本类型
  • 数值
    • NaN 属于 JavaScript 保留词，指示某个数不是合法数,尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）
    • isNaN() 来确定某个值是否是数
    • 方法
      • https://www.w3school.com.cn/jsref/jsref_obj_number.asp
  • 布尔值 true 或 false
  • 字符串
    • 双引号或单引号中
    • 字符串也可通过关键词 new 定义为对象,var firstName = new String("Bill"), 但最好不要这么做
    • 方法
      • https://www.w3school.com.cn/jsref/jsref_obj_string.asp
  • 数组
    • 创建方法
      • var array-name = [item1, item2, ...];
      • new Array("Saab", "Volvo", "BMW");
    • 访问数组元素
      • 通过引用索引号（下标号）来引用某个数组元素,数组索引从 0 开始
    • 数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 "object"
    • 方法
      • https://www.w3school.com.cn/jsref/jsref_obj_array.asp
    • 遍历
      • Array.forEach(function) 为每个数组元素调用一次函数（回调函数）
        • function的入参 value, index, array
      • Array.map(function) 对每个数组元素执行函数来创建新数组。
      • Array.filter(function) 创建一个包含通过测试的数组元素的新数组
      • Array.every(function) 检查所有数组值是否通过测试
      • Array.some(function) 检查某些数组值是否通过了测试
      • Array.find(function) 返回通过测试函数的第一个数组元素的值
      • Array.findIndex(function) 返回通过测试函数的第一个数组元素的索引
      • Array.indexOf(item) 在数组中搜索元素值并返回其位置
      • Array.lastIndexOf()
  • 对象
    • 值以名称:值对的方式来书写，被称为属性
      • 两种方式访问属性objectName.propertyName 和 objectName["propertyName"]
    • 对象也可以有方法，方法是在对象上执行的动作
      • objectName.methodName()
    • 在函数定义中，this 引用该函数的“拥有者”
    • for...in 语句遍历对象的属性
    • 不要把字符串、数值和布尔值声明为对象
      • 如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：
      • var x = new String(); // 把 x 声明为 String 对象
      • var y = new Number(); // 把 y 声明为 Number 对象
      • var z = new Boolean(); // 把 z 声明为 Boolean 对象
      • 会增加代码的复杂性并降低执行速度
  • 日期
    • 创建
      • new Date()
      • new Date(year, month, day, hours, minutes, seconds, milliseconds)
      • new Date(milliseconds)
      • new Date(date string)
  • 校验
    • typeof 来确定 JavaScript 变量的类型.string\number\boolean\undefined\function\object
      • 对数组返回 “object”，因为在 JavaScript 中数组属于对象
      • 没有值的变量，其值是 undefined。typeof 也返回 undefined
      • null 的数据类型是对象
• 函数
  • 定义
    • 通过 function 关键词进行定义，其后是函数名和括号 ()
      • 匿名函数，x变量存储了一个匿名函数 ： var x = function (a, b) {return a * b};
      • 实名函数： function x(a, b) {return a * b};
    • 假如表达式后面跟着 (),表达式会自动执行，需要在函数周围添加括号，以指示它是一个函数表达式
      • (function () {var x = “Hello!!”;})();
    • 使用 call() 方法，您可以编写能够在不同对象上使用的方法
    • 箭头函数允许使用简短的语法来编写函数表达式。不需要 function 关键字、return 关键字和花括号
      • const x = (x, y) => x * y;
  • 入参
    • 参数是局部变量
    • 函数定义不会为参数（parameter）规定数据类型，函数不会对所传递的参数（argument）实行类型检查
    • 函数不会检查所接收参数（argument）的数量
      • 如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined
    • 函数有一个名为 arguments 对象的内置对象，arguments 对象包含函数调用时使用的参数数组
    • 值传递和引用传递
  • 函数体
    • 函数中声明的变量，会成为函数的局部变量, 只能在函数中访问
    • 如果为尚未声明的变量赋值，此变量会自动成为全局变量
  • 闭包
    • 函数拥有私有成员变量
    • 在函数A中定义一个函数B去修改函数变量，并且在函数A中直接调用B()
  • 公共函数
    • 数学Math 对数字执行数学任务
    • random() 返回 0包括） 至 1（不包括） 之间的随机数
• 优化
  • 请使用对象字面量 {} 代替 new Object()。
  • 请使用字符串字面量 “” 代替 new String()。
  • 请使用数值字面量代替 Number()。
  • 请使用布尔字面量代替 new Boolean()。
  • 请使用数组字面量 [] 代替 new Array()。
  • 请使用模式字面量代替 new RexExp()。
  • 请使用函数表达式 () {} 代替 new Function()。

2.1 参考文献

• W3 school Js教程
• 菜鸟教程 JS

三、踩坑

• 块元素
  • width的默认值是父元素的100%,一般情况下不用设置就可以满足需求。height的默认值是里面内容的高度,也就是auto,一般写代码的时候也不需要给元素设置高度,如果设置了高度而且设置的高度不够的时候，就会出现元素重叠的情况
• 重叠
  • 外面一层 position：relative；里面的 position：absolute 就可以
• width:100% 会导致滚动
• 高度设置50%时是有问题的，此时可以使用vh，代表可视高度0-100
  • 内容div默认高度超出时，是会显示的，看上去是撑大了元素，，，需要给组件设置overflow
• 箭头函数内不能使用this，一般用于静态函数，，，因为你是定义了一个变量，在变量的this，肯定是执行变量本身的
• this指向问题的解决：apply,call,bind
• ref 获取组件实例

参考文献

• CSS 参考手册
• JavaScript 教程
• Flex 布局教程：语法篇
• React Native中position、flexbox布局