分类 学习 下的文章 - 浮川的小窝
首页
休闲直播
4K壁纸
统计
关于
留言
归档
搜 索
1
HelloWorld!
122 阅读
2
前端算法整理
95 阅读
3
HTTPS原理和通信流程
77 阅读
4
百度长文语音生成
63 阅读
5
正则基础复习
37 阅读
生活
学习
随笔
吐槽
小秘密
小故事
登录
/
注册
搜 索
浮川
累计撰写
62
篇文章
累计收到
5
条评论
首页
栏目
生活
学习
随笔
吐槽
小秘密
小故事
页面
休闲直播
4K壁纸
统计
关于
留言
归档
用户登录
登录
注册
找到
39
篇与
学习
相关的结果
2021-05-14
md入门使用
基本符号:* - +. >基本上所有的markdown标记都是基于这四个符号或组合,需要注意的是,如果以基本符号开头的标记,注意基本符号后有一个用于分割标记符和内容的空格。以下是常用语法一.标题嵌套列表 前面带#号,后面带文字,分别表示h1-h6,只到h6,而且h1下面会有一条横线# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题效果如下:二.列表无序列表形式一abc 形式二def 形式三ghi效果如下:有序列表正常形式abcbcdcde 错序效果fghghihij效果如下:如图,注意,数字后面的点只能是英文的点,有序列表的序号是根据第一行列表的数字顺序来的,错序列表的序号本来是序号是乱的, 但是还是显示 2 3 5三.嵌套列表嵌套列表实例:abcdabcdeabcdeabcde第三层第四层第五层bcdecdef无序列表嵌套123abcbcdcde465789有序列表嵌套abcdabcdeabcdeabcde第三层bcdecdef列表可以嵌套,使用时在嵌套列表前按 tab 或 空格 来缩进,去控制列表的层数效果如下:四.引用说明区块对某个部分做的内容做一些说明或者引用某某的话等,可以用这个语法。正常形式> 引用内容、说明内容。在语句前面加一个 > ,注意是英文的那个右尖括号,注意空格,引用因为是一个区块,理论上是应该什么内容都可以放,比如说:标题,列表,引用等等。效果如下:嵌套区块这里我只介绍一下我常用的方法,也是个人认为比较规范的一种方法,就是给区块的下一级区块多加一个右尖括号> 一级引用 >> 二级引用 >>> 三级引用 >>>> 四级引用 >>>>> 五级引用 >>>>>> 六级引用效果如下:五.代码块在发布一些技术文章会涉及展示代码的问题,这时候代码块就显得尤为重要。1.少量代码,单行使用,直接用`包裹起来就行了` shaoliangdaima,danhangshiyong `效果如下:少量代码,单行使用,直接用`包裹起来就行了daliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyongdaliangdaima,xuyaoduohangshiyong效果如下:六.链接行内式链接的文字放在[]中,链接地址放在随后的()中,链接也可以带title属性,链接地址后面空一格,然后用引号引起来简书,是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。参数式链接的文字放在[]中,链接地址放在随后的:后,链接地址后面空一格,然后用引号引起来[简书]: https://www.jianshu.com "创作你的创作" [简书]是一个创作社区,任何人均可以在其上进行创作。用户在简书上面可以方便的创作自己的作品,互相交流。 //参数定义的其他写法 [简书]: https://www.jianshu.com '创作你的创作' [简书]: https://www.jianshu.com (创作你的创作) [简书]: <https://www.jianshu.com> "创作你的创作"以上两种方式其效果图都是一样的,如下:七.图片行内式和链接的形式差不多,图片的名字放在[]中,图片地址放在随后的()中,title属性(图片地址后面空一格,然后用引号引起来),注意的是[]前要加上! ![图片链接.png](https://snowlove.synology.me:5106/usr/uploads/2021/05/3541244480.png)参数式图片的文字放在[]中,图片地址放在随后的:后,title属性(图片地址后面空一格,然后用引号引起来),注意引用图片的时候在[]前要加上![my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo" ![my-logo.png] //参数定义的其他写法 [my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 'my-logo' [my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 (my-logo) [my-logo.png]: <https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240> "my-logo"以上两种方式其效果图都是一样的,如下:![my-logo.png]八.分割线分割线可以由* - _(星号,减号,底线)这3个符号的至少3个符号表示,注意至少要3个,且不需要连续,有空格也可以 --- - - - ------ *** * * * ****** ___ _ _ _ ______以上代码的效果图均为:九.其他强调字体一个星号或者是一个下划线包起来,会转换为倾斜,如果是2个,会转换为加粗 *md* **md** _md_ __md__效果图:转义基本上和js转义一样,\加需要转义的字符 \\ \* \+ \- \` \_删除线用~~把需要显示删除线的字符包裹起来 ~~删除~~效果图:十.表格下面三个例子的效果一样,由此可得:1. 表格的格式不一定要对的非常起,但是为了良好的变成风格,尽量对齐是最好的 2. 分割线后面的冒号表示对齐方式,写在左边表示左对齐,右边为右对齐,两边都写表示居中实例:表头1表头2表头3表头4表头5行一测试内容1行一测试内容2行一测试内容3行一测试内容4行一测试内容5行二测试内容1行二测试内容2行二测试内容3行二测试内容4行二测试内容5行三测试内容1行三测试内容2行三测试内容3行三测试内容4行三测试内容5 例子一 |123|234|345| |:-|:-:|-:| |abc|bcd|cde| |abc|bcd|cde| |abc|bcd|cde| 例子二 |123|234|345| |:---|:---:|---:| |abc|bcd|cde| |abc|bcd|cde| |abc|bcd|cde| 例子三 123|234|345 :-|:-:|-: abc|bcd|cde abc|bcd|cde abc|bcd|cde效果图如下:未完待续 继续补充中...
2021年05月14日
18 阅读
0 评论
0 点赞
2021-04-19
正则 ?: 、 ?= 、 ?! 、 ?<= 、 ?<!
正则规则收集?:pattern匹配pattern但不获取匹配结果 var str = 'aaabbb' var reg = /(a+)(?:b+)/ str.match(reg) // ["aaabbb", "aaa", index: 0, input: "aaabbb", groups: undefined]?=pattern 零宽度正预测先行断言意思就是匹配内容右侧必须为pattern var str = "i'm singing and dancing"; var reg = /\b(\w+(?=ing\b))/g var res = str.match(reg); console.log(res) // ["sing", "danc"]?!pattern 零宽度负预测先行断言就是匹配右侧不是pattern内容 var str = 'nodejs' var reg = /node(?!js)/ reg.test(str) // false?<=pattern匹配这个位置之前为pattern的内容 var str = '111$222' var reg = /(?<=\$)\d+/ str.match(reg) // ["222", index: 4, input: "111$222", groups: undefined]?<!pattern匹配这个位置之前部位pattern的内容 var str = '¥998$888'; var reg = /(?<!\$)\d+/; console.log(reg.exec(str)) //998
2021年04月19日
22 阅读
0 评论
0 点赞
2021-04-14
网页版 vscode - 套娃王的一生
先上效果图本着买了群晖不捣鼓到死机的原则,把偶然间发现的网页版vscode搭建提上了日程,虽然目前只能实现简单的项目运行 但是也是记录一下 linux、docker苦手的搭建之路。
2021年04月14日
32 阅读
0 评论
0 点赞
2021-02-24
css弹性盒子-------桃园三兄弟之:flex-grow、flex-shrink、flex-basis详解
flex-grow、flex-shrink、flex-basis三个属性的作用:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的。(注意:这三个属性都是在子元素上设置的,下面小编要讲的是父元素,指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性:首先是 flex-basis ,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,你是次要成分,所以见到我的时候你要靠边站。其次是 flex-grow,grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,这时,flex-grow就会说我要成长,我要长大,怎么样才能成长呢,当然是分享父元素的空间了。见下面第二个属性的内容最后是 flex-shrink, shrink英文意思是<收缩,>,这就代表当父元素的宽度小于子元素宽度之和时,并且超出了父元素的宽度,这时,flex-shrink就会说外面的世界太苦了,我还是回到父亲的怀抱中去吧!因此,flex-shrink就会按照一定的比例进行收缩。见下面第三个属性的内容第一个属性:flex-basis该属性用来设置元素的宽度,其实,width也可以设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。 .box{ display: flex; margin:100px auto; width:400px; height:200px; } .inner{ width:200px; height:100px; flex-basis:300px; background:pink; } </style> 见下图:小编我把宽度设置为width:200px; flex-basis:300px;结果显示表明子元素.inner应用了属性flex-basis; 第二个属性:flex-grow该属性用来设置当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。 flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。举个例子: 父元素宽400px,有两个子元素:A和B。A宽为100px,B宽为200px。 则空余空间为 400-(100+200)= 100px。 如果A,B都不索取剩余空间,则有100px的空余空间。 <div class="inner1"> </div>.box{ display: flex; flex-direction: row; margin:100px auto; width:400px; height:200px; border:1px solid red; } .inner{ flex-basis:100px; height:100px; background:pink; } .inner1{ flex-basis:200px; height:100px; background:blue; }见下图:如果A索取剩余空间:设置flex-grow为1,B不索取。则最终A的大小为 自身宽度(100px)+ 剩余空间的宽度(100px)= 200px 。.inner{ flex-basis:100px; height:100px; background:pink; flex-grow:1; } .inner1{ flex-basis:200px; height:100px; background:blue; }见下图:如果A,B都设索取剩余空间,A设置flex-grow为1,B设置flex-grow为2。则最终A的大小为 自身宽度(100px)+ A获得的剩余空间的宽度(100px (1/(1+2))),最终B的大小为 自身宽度(200px)+ B获得的剩余空间的宽度(100px (2/(1+2)))(这里呢小编只给了公式,小伙伴们可以自己去算一下).inner{ flex-basis:100px; height:100px; background:pink; flex-grow:1; } .inner1{ flex-basis:200px; height:100px; background:blue; flex-grow:2; }见下图:第三个属性:flex-shrink该属性用来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。 flex-shrink的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。举个例子: 父元素宽400px,有两子元素:A和B。A宽为200px,B宽为300px。 则A,B总共超出父元素的宽度为(200+300)- 400 = 100px。 如果A,B都不减小宽度,即都设置flex-shrink为0,则会有100px的宽度超出父元素。 .box{ display: flex; flex-direction: row; margin:100px auto; width:400px; height:200px; border:1px solid red; } .inner{ flex-basis:200px; height:100px; background:black; flex-shrink:0; } .inner1{ flex-basis:300px; height:100px; background:blue; flex-shrink:0; }见下图:如果A不减小宽度:设置flex-shrink为0,B减小。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px .inner{ flex-basis:200px; height:100px; background:black; flex-shrink:0; } .inner1{ flex-basis:300px; height:100px; background:blue; flex-shrink:1; }见下图:如果A,B都减小宽度,A设置flex-shirk为3,B设置flex-shirk为2。则最终A的大小为 自身宽度(200px)- A减小的宽度(100px (200px 3/(200 3 + 300 2))) = 150px,最终B的大小为 自身宽度(300px)- B减小的宽度(100px (300px 2/(200 3 + 300 2))) = 250px.inner{ flex-basis:200px; height:100px; background:black; flex-shrink:3; } .inner1{ flex-basis:300px; height:100px; background:blue; flex-shrink:2; }见下图:这里小编明确一点,flex是flex-grow,flex-shrink, flex-basis (注意小编写的顺序)缩写形式,大家可以记一下下面的缩写规则:如:flex 取值为 none,则计算值为 0 0 auto,如下是等同的:.item .item {flex-grow: 0; flex-shrink: 0; flex-basis: auto;}当 flex取值为 auto,则计算值为 1 1 auto,如下是等同的:.item .item {flex-grow: 1; flex-shrink: 1; flex-basis: auto;}当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:.item .item 当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):.item-1 .item-1 .item-2 .item-2 当 flex取值为两个非负数字,则分别视为 flex-grow和 flex-shrink的值,flex-basis取 0%,如下是等同的:.item .item 当 flex取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow和 flex-basis的值,flex-shrink取 1,如下是等同的: .item .item 转自 https://blog.csdn.net/m0_37058714/article/details/80765562
2021年02月24日
22 阅读
0 评论
0 点赞
1
...
7
8