Notebook-StarNet/aboutCSS.md

与 css 相关，多学习 css

css inset

• 同时设置上下左右等多个属性值
• inset : top | right| bottom | left
• 使用例：

  .className {
      inset: 4px 8px; /* 上下 | 左右 */
      inset: 5px 15px 10px; /* 上 | 左右 | 下 */
      inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
  }
  

css 过渡 transition

• 有 transition-property、transition-duration、transition-timing-function 和 transition-delay 这几个属性，不过一般使用时应该都是用 transition 合起来写。

• 使用例：

  .className {
      /* property name | duration | timing function | delay */
      transition: margin-right 4s ease-in-out 1s;
  
      /* Apply to 2 properties */
      transition: margin-right 4s, color 1s;
  }
  

css 动画 滚动条驱动

• animation-timeline
• 有时间再写

css 动画

• 分为“定义”与“使用”两个阶段。

• “定义”阶段的 keyword 为@keyframes，例：

  // 每个时间点填对应时间点的style
  @keyframes animationName {
      0% {
          border-radius: 1px;
      }
      50% {
          border-radius: 12px;
      }
      100% {
          border-radius: 123px;
      }
  }
  

• “使用”阶段的 keyword 为 animation，使用 animation 绑定动画，例

  div {
      animation: animationName 5s;
  }
  

• animation 有许多属性

  div {
      // 绑定的动画名
      animation-name: animationName;
      // 动画执行总时长
      animation-duration: 5s;
      // 速度曲线。默认是 "ease"。
      animation-timing-function: linear;
      animation-delay: 2s;
      // 播放次数，默认1
      animation-iteration-count: infinite;
      // 是否在下一个周期逆向播放
      animation-direction: alternate;
      // 是否正在播放（）
      animation-play-state: running;
      // 简写
      animation: animationName 5s linear 2s infinite alternate;
      // 多个动画之间使用逗号进行隔开
      animation: a1..., a2...;
  }
  

before 与 after

• 伪元素，通过 content 来指定内容，before 就是在前面，after 就是在后面（哇好有道理呢）

• 用途一般是加个 icon 啥的，content 可以为 url(...)

• 不能应用在替换元素上，比如 <img>

• 伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素 使用例：

  a {
      color: #0000ff;
      text-decoration: none;
  }
  
  a::before {
      content: '🔗';
  }
  

• 使用 inherit 使子元素拥有与父元素相同的特定属性值 使用例：

  div {
      position: relative;
      background: url('your-image-url.jpg');
  }
  
  div::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background: inherit;
      z-index: -1;
  }
  

!important 相关

• 不到万不得已不要用，是不好的写法

• 如果你的 important 不够 important,那可以写 class 的时候多写点前缀，例：

  // 一般
  .ant-slider-rail {
      background-color: rgb(141, 93, 56) !important;
  }
  // 优先级特别高
  .slider .ant-slider .ant-slider-rail {
      background-color: rgb(141, 93, 56) !important;
  }
  

xx[a=xxx]的使用

• 这玩意叫属性选择器

• 案例：

  a {
      color: blue;
  }
  
  /* 以 "#" 开头的页面内部链接 */
  a[href^='#'] {
      background-color: gold;
  }
  
  /* 包含 "example" 的链接 */
  a[href*='example'] {
      background-color: silver;
  }
  
  /* 包含 "insensitive" 的链接，不区分大小写 */
  a[href*='insensitive' i] {
      color: cyan;
  }
  
  /* 包含 "cAsE" 的链接，区分大小写 */
  a[href*='cAsE' s] {
      color: pink;
  }
  
  /* 以 ".org" 结尾的链接 */
  a[href$='.org'] {
      color: red;
  }
  
  /* 以 "https" 开始，".org" 结尾的链接 */
  a[href^='https'][href$='.org'] {
      color: green;
  }
  

  • 属性不一定要是 href 什么的，自己定也没关系。
  • 案例：

  /* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
  div[lang] {
      font-weight: bold;
  }
  
  /* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
  div[lang~='en-us'] {
      color: blue;
  }
  
  /* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
  div[lang='pt'] {
      color: green;
  }
  

grid

```css
.container {
    display: grid;
    grid-template-columns: repeat(2, 100px 20px 80px);
    /* repeat 配合auto-fill/auto-fit 配合minmax 实现自适应布局 */
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    /* 先行后列，尽可能填满 */
    grid-auto-flow: row dense;
}
.item-1 {
    /* 边框所对应的网格线 */
    /* grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 */
    grid-column-start: 2;
    grid-column-end: 4;
    grid-column: 2/4;
    grid-row: 1/2;
}
```

point-event

当为none时，所有点击事件无效