今天的完成的事情：准备小课堂中，学习理论知识

遇到的问题：暂无；

明天的计划：有事请假一天，暂无计划；

今天的收获：

• 网页头部的<lang=“”>声明，之前没有注意过这个问题，都是直接用的插件自动生成的HTML模板自带<lang=“en”>，这样是不规范的，“en”代表的是英文语言code；中文的langcode之前使用的是zh-cn（简体中文），zh是中文，代表宏语言（macrolanguage），zh单独用表示中文整体，可以是方言、文言文、简繁体混合内容，zh-cn表示的是中国大陆中文，包含方言和简繁体，默认是简体，但是这样做的却导致了别的地区，如新加坡也是用的简体中文（zh-SG）就没有办法匹配到设置的<zh-cn>； 现在能作为语言code的是cmn（国语、普通话），所以应该使用zh-cmn-Hans-/zh-cmn-Hant来表示简体和繁体，一般而言没有必要加地区代码，除非要表示地区特异性；参考链接https://www.zhihu.com/question/20797118

nth-child的用法：

• :nth-child 冒号前面应该写的我们想要选择的元素名称，加入要选择div里面的第二个span标签，代码如下，如果在元素前加上父级元素，就只能作用在父级元素里，举例子：

• 上面这串代码的作用域自能在div里的第二个<span>标签，如果把div去掉，那么作用的就是所有在自定父级元素的span标签；

• 这串代码其父级元素是body，使用nth-child 无效!

• 选择大于等于第几个子元素开始：

第二个以上的元素全部被选中！

• 选择小于等于第几个子元素：从第几开始到第几个元素 
• div span:nth-child(-n+2){

  background: #0FF;}
  小于等于2的元素全部被选中！
  • 选取偶数标签：
  div span:nth-child(2n){

  background: #0FF;}
   所有作用域内的偶数标签被选取！
  • 选取奇数标签：
  div span:nth-child(2n-1){

  background: #0FF;}
  
  
  • 自定选择标签，*n+1 代表格*选1
  div span:nth-child(4n+1){

  background: #0FF;}
  这段代码叫做隔4选1，1这个数字会从第一行开始作用，加入是(4n+2)，就用先选中第二行，再在第一行的基础上隔四选择第二个（也就是第六个）！
  • 选择最后一个元素：
  div span:last-child{

  background: #0FF;}
  
  
  • 自然也有选择第一个元素：
  div span:first-child{

  background: #0FF;}
  
  
  • 选择倒数第几个元素：
  div span:nth-last-child(2){

  background: #0FF;}
  
  
  • 前后范围限制
  div span:nth-child(n+2):nth-child(-n+4){

  background: #0FF;}
  从第二标签开始到第4标签
  nth:child 到这儿就结束了，平常使用也够了！ 

• ---

  :after ::after/::before
  • :after 是以前的写法，和:hover这样的伪类并没有分开来，在css3中为了将伪类和伪元素区别开，就用了::after 来表示伪元素！
  • 这两个伪类特有的属性content， 不会改变元素内容，不会在dom层复制，只会在css中渲染
  • [string]，使用引号包括一段字符串，将会像元素添加字符串；
  利用审查元素在DOM并没有发现“text”这段内容！
  • 使用了width/display 的伪元素会脱离原来的元素，下面的图片中，给i标签加一段内容，给伪元素增加margin-left改变的只是伪元素本身！
  i:after{

  display: inline-block;

  content: "text";

  width: 30px;

  height: 30px;

  background: #0FF;}
  
  
  • 使用伪元素在首尾清除浮动
  • ---

    • 文本省略号
    • 踩过的坑：一般如果要让文本的内容宽度不够就出现省略号必须要给段落设置下边三行代码：white-space: nowrap;文字不换行；overflow: hidden; 超出的地方隐藏；text-overflow: ellipsis; 文字隐藏后出现省略号：
    html样式： css样式：
    
     但是！！如果段落外面还有一层父级，如果父级没有设置overflow:hiddem，那么父级里面的元素只会一直缩小，可以看到两个段落不管缩放多小，都不会改变；
    
    
    给父级设置overfl:hidden后就会正常出现省略号了，甚至设置了把值设为scroll都可以！！
    
    

    ---

    w3c给出的overflow的定义是：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
    这个属性的值有：

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