css伪元素、VScode命令

::before ::after伪元素

• 不是空标签的元素都自带::before、::after两个伪类，只不过平时隐藏了

  before在所有元素前面加东西
  after在所有元素后面加东西

• 在伪元素里加的东西无法被选取（点击、复制等）或做操作（hover、click等）
• 伪类能做元素能拥有的所有css属性，但就是时独立的

• ::before、::after伪元素一般都是隐藏的，需要添加css属性才能现身~~

  /*content是给元素添加内容; content:""就是给元素添加空内容*/
  css content: "";
  display: block;

• 简单来讲，::before、::after伪元素就是一个块级元素的第一个和最后一个元素
  其他都一样，但这两个元素不能再有子元素的，也没有hover、click、mouseout等这样的操作

• 可以有选择器:伪类::after、选择器:伪类::before这样子的命令来操作伪元素的动态

  div:hover::after{
      color: red;
  }
  
  div:hover::before{
      color: red;
  }

碎碎念

• 绝对定位的元素，自动变为block
• box-sizing: border-box;意思是把边框也算到元素的宽高里去
• css动画：
  mdn
  变化：transform：rotate
  过度：transition

• 制作进度条

  两个div包裹，加上背景色标识下就看的清了
  
  <div style="background: red; width: 100px; height: 30px;">
      <div style="background: green; width: 100%; height: 100%"></div>
  </div>

• 对于块，一定加上宽度width,margin: auto;才有居中的作用
• 设置display: inline-block;后会产生空隙
  加上vertical-align: top;消除

• 指针变成手性

  cursor: pointer;

• 想要页面中的元素能够动态的变换位置，请使用绝对定位
• text-align: center;和letter-spacing: ;
  会使文字会居中并向一边展开
  使用text-indent设置缩进，令文字看上去从中间向两边展开

VScode

常用命令

• 复制这一行

  shift + alt + uparrow/downarrow

• 删除这一行

  shift + del

• 这行上移一行/下移一行

  alt + uparrow/downarrow

• 光标切换分窗口

  alt + leftarrow/rightarrow

• 复制光标到每一行

  shift + ctrl + alt

• 选中到下一个符

  shift + ctrl