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