xxxgitone
我的学习日志(一)
平时在学习过程中，经常会get到一些小知识点，一些小技巧，但是这些知识比较杂，不足以写一篇文章去详细讲解。不记下来的话，过一段时间估计又忘了，我可是吃了不少亏，以前学过的东西，用的时候死都想不起来，看到了才记起来 :joy:
看到很多人用Issues写博客，我为啥不用它来记录我的这些知识点。想了想，干脆将它写成我的学习日志，记录我每一天的学习情况，记录我今天完成的任务，学到的知识点，希望可以借此让自己学到更多的东西 :heart:
今日完成的任务
- [x] 两小时的英语学习,这个真难，希望有所收货 :sob:
- [X] 重温flexbox布局，写了一篇博文
- [X] 继续vn-pastime项目的编写，完成视频数据的调用，播放器样式
知识点记录
1. margin-left: auto
今天在网上找Flexbox布局资料的时候，意外发现这个个小魔法(在我这是)，以往经常用margin: 0 auto，却一直没有想到过，拆分这个属性使用。使用Flex布局制作导航，有时候会想要将一个链接放到另外一边。
<nav>
<a href="#">MENU1</a>
<a href="#">MENU2</a>
<a href="#">MENU3</a>
<a href="#">MENU4</a>
<a href="#">CONTACT</a>
</nav>
css代码
html, body {
padding: 0;
margin: 0;
}
nav {
margin: 0;
box-sizing: border-box;
background: black;
display: flex;
align-items: center;
padding: 0 2rem;
min-height: 2.8rem;
width: 100%;
}
a {
color: #fff;
text-decoration: none;
padding: 0 1rem;
}
a:nth-child(5) {
margin-left: auto;
}
将最后一个a标签设置成margin-left: auto，就可以让它放到最右边去了，该代码起到的作用是，让其用上该侧所有可用的外边距，最后效果
2. CSS结构选择器
在写代码的时候，发现这两个CSS结构选择器功能相似，一脸懵逼。不过查阅资料后，发现还是有些差别
-
nth-child(): 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素 -
nth-of-type()选择器匹配属于其父元素的第 N 个子元素，不论元素的类型
定义看懂了没？反正我是一头雾水...
在有些情况下，他们的效果一样，下面例子，将第二个p元素的背景变成红色
结构代码
<div>
<p>文本1</p>
<p>文本2</p>
<p>文本3</p>
</div>
css代码
p:nth-child(2) {
background: red;
}
p:nth-of-type(2) {
background: red;
}
两个可以达到效果，他们到底有什么样的差别。差别在于
p:nth-child(2)：选择p元素，并且这个p元素是其父元素(div)的第二个孩子
nth-of-type(2)：父元素(div)的第二个段落子元素
大概懂了，第一个多了限制条件，再看一个例子，继续让第二个p标签的背景变为红色
<div>
<h1>标题</h1>
<p>文本1</p>
<p>文本2</p>
<p>文本3</p>
</div>
使用上面的css代码
p:nth-child(2) {
background: red;
}
阿欧，并没有让第二个p标签背景变红，而是然后第一个变红了
p:nth-of-type(2) {
background: red;
}
这个实现了，差别就在这里了
其它用法
-
nth-child(odd)指定奇数 -
nth-child(even)指定偶数 -
nth-child(3n+1)指定公式
nth-of-type也有上面用法
还有两个nth-last-child()，nth-last-of-type指定从最后一个开始
第一次用issues记录东西，遇到图片引用问题，找到两种解决方案
- 上传到github上，建一个存放图片的文件，然后add->commit->push,在github上进入该图片的位置，点击download，复制url即可
- 托管到图片库
晚安 :rose: :rose:
