学习日报的

2021.7.5

今天来到金山办公的第一天，熟悉了环境，了解了git等软件的配置。

7.6

从命令行创建一个新的库

``` touch README.md git init git add README.md git commit -m "first commit" git remote add origin https://git.kscampus.io:10443/liuyi/sd.git git push -u origin master ```

引入CSS的方法

- 内联方式

直接在HTML标签的style属性中添加CSS。

```

hello world

``` - 嵌入方式 在 HTML 头部中的style标签下书写CSS代码。 ``` ``` - 链接方式 使用HTML头部head标签引入外部CSS文件 ``` ...

hello world

```

7.7

  假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。

7.8

还有好学习等会再写。hhh vscode注释的快捷键:Alt+Shift+A

### 水平和垂直对齐

align-items 控制 flex 项在交叉轴上的位置。

• 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
• center 值会使这些项保持其原有的高度，但是会在交叉轴居中。
• 你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。

justify-content 控制 flex 项在主轴上的位置。

• 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
• 你也可以用 flex-end 来让 flex 项到结尾处。
• center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
• space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
• 还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

7.9

grid布局怎么居中不会，过会解决。用felx布局解决了

字条间距怎么调？

CSS white-space 属性

实例

规定段落中的文本不进行换行：

p
  {
  white-space: nowrap
  }

可能的值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

CSS overflow 属性

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS text-overflow 属性

定义和用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法

text-overflow: clip|ellipsis|string;

值	描述	测试
clip	修剪文本。	测试
ellipsis	显示省略符号来代表被修剪的文本。	测试
string	使用给定的字符串来代表被修剪的文本。

CSS line-height 属性

定义和用法

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值

可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

7.10

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

二、实现

2.1 Triangle Up

**

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

7.11

vs格式化代码快捷键 shift+ctrl+A

记得引入css样式！！

怎么用js引用json数据：？？？？

7.12

知道了hr标签

---

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

用这个来实现网格自动换行

7.13

flex布局中flex:0 1 auto是什么

flex:0 1 auto;

flex是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写

flex-grow

表示当子元素的空间小于父元素的空间时,如何处理剩余空间, 默认值为0表示不占有剩余空间; 当子元素都设置为1时表示平均分配剩余空间; 当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍; 当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间

felx-shrink

表示当子元素的空间大于父元素的空间时,如何缩小子元素 默认值为1表示等比缩小 当所有子元素都设置为1时所有子元素都会等比例缩小 当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小

flex-basis

用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值

7.20

JavaScript splice() 方法

JavaScript Array 对象

定义和用法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

返回值

类型	描述
Array	包含被删除项目的新数组，如果有的话。

说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组

7.21

HTML DOM querySelector() 方法

 Document 对象

实例

获取文档中 id="demo" 的元素：

document.querySelector("#demo");

尝试一下 »

定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

7.22

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

在 JSX 语法中，

你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

创建TS项目

tsc --init

tsc -w

模板字符串

模板字符串是增强版的字符串，用反引号 ()来标识，它可当作普通字符串来使用，也可以用来定义多行文本，或者通过${}` 在字符串中嵌入变量或表达式。

let a = `template string` // 普通字符串

let name = 'Frank'
let b = `Hello ${name}!`
console.log(b) // Hello Frank!

注意

如果要在 TS 中使用 JSX 语法，需要使用 .tsx 的文件后缀，而不是 .ts，

7.23

localStorage的使用

localStorage.getItem(key):获取指定key本地存储的值 localStorage.setItem(key,value)：将value存储到key字段

7.27

学习react