我的学习日志(一)

[xxxgitone]

平时在学习过程中，经常会get到一些小知识点，一些小技巧，但是这些知识比较杂，不足以写一篇文章去详细讲解。不记下来的话，过一段时间估计又忘了，我可是吃了不少亏，以前学过的东西，用的时候死都想不起来，看到了才记起来 😂

看到很多人用Issues写博客，我为啥不用它来记录我的这些知识点。想了想，干脆将它写成我的学习日志，记录我每一天的学习情况，记录我今天完成的任务，学到的知识点，希望可以借此让自己学到更多的东西 ❤️

今日完成的任务

• 两小时的英语学习,这个真难，希望有所收货 😭
• 重温flexbox布局，写了一篇博文
• 继续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即可
• 托管到图片库

晚安 🌹 🌹