1、button

• display: block; 不会生效

• width: auto 不会生效

• width: 100%, margin：16px

同时出现会出现以下情况

解决方法：在 button 外面加一个父元素 div 在 div 上加 padding 或者 margin

2、常用 CSS reset

body{ // 隐藏滚动条
    ::-webkit-scrollbar { width: 0 !important }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button, input {
  font: inherit;
}

:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

3、两个上下分布的 div 中间出现一个像素的线

解决方法：在下面的 div 加上 margin-top: -1px; 样式，或者上面的 div 加上margin-bottom: -1px;样式

4、实现 tab 切换 下面的选中样式

// scss
.selected {
        position: relative;
        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          height: 4px;
          background: var(--tabs-indicator-bg);
        }
      }

5. github-markdown-css

网址

6.鼠标悬浮变小手

cursor: pointer;

7.消除input type='password' 的小眼睛

input[type='password']::-ms-reveal { display: none; }