Css知识收集

：豆知识

：实用小技巧

单位

• px：像素点个数。
• em：相当于“乘以的倍数”。

• vw(view width)

• vh(view height)

选择器

判断标签父子关系：标签的嵌套关系

• 普通：空格——后面的子代都继承父代的可继承特性

• 子代：>——只有父代的直接子代继承特性
• 邻接兄弟：+
• 通用兄弟：~

伪元素

• 为原元素添加修饰属性

  • ::before
  • ::after

  一定要加上content: "";属性。

  更多伪元素详见MDN文档。

页面布局

• 阴影box-shadow：x偏移量 y偏移量 模糊半径 阴影范围 阴影颜色

• 去掉无序列表的点：list-style: none;

• 去掉超链接下划线：text-decoration: none;

• border

  圆边框：border-radius: 100%;

  • border-style：
    • solid：单实线
    • dashed：虚线
    • dotted：点线
    • double：双实线

• position: relative VS absolute（理解“子绝父相”）

  • 相对定位：

    元素仍然占据其在文档流中的位置，但你可以通过设置 top, left, right, bottom 等属性来相对于它本身的原始位置进行移动。

  • 绝对定位：

    元素会从文档流中完全移除，接着根据最近的已定位的祖先元素（即有 position 属性且值不是 static 的元素）进行定位。

    （“从文档流移除”与float有些相似。)

  可通过top、left等属性控制元素位置的相对偏移。如：

  /* 元素对齐左上角 */
  top: 0;
  left: 0;  
  

  inset属性：

  /* top等4种属性简写 */
  inset: 0;
  

• transform: translateX / Y / Z()

  垂直居中：

  /* 常见两个一起用 */
  top: 50%;  /* 元素顶部位于容器高度的中间位置 */ 
  transform: translateY(-50%);  /* 将元素向上移动其自身高度的一半 */
  

• display

  • inline-block：inline虽然可避免换行，但无法设置宽和高；采用inline-block就可以设置宽高了。
  • flex：
    • 横/纵向排列：flex-direction: row/column(-reverse);
    • 横向居中：justify-content: center;
    • 纵向居中：align-items: center;
    • 填充满父容器：flex-grow
  • grid

• 元素居中：flex、grid/父子元素间有空余空间，子元素margin: auto（仅限水平居中）

图像

• 渐变色背景linear-gradient：渐变方向 渐变轴角度 颜色1，颜色2，…

  • 渐变方向：默认从上→下。有to left、to right等选项。
  • 颜色可按比例分布。

  更多信息详见MDN文档。

• transform：

  • 缩放scale( 缩放比例 )
  • 旋转rotate( xxdeg )

  有关transform属性的更多信息，详见MDN文档。

• img VS “background-image”

  img 和 background-image 优劣比较_background-image和img区别-CSDN博客

过渡动画

需设置好：初始、最终状态/如何触发/如何过渡（时间长短、速度控制.etc）。

• transition：

  • 动画持续时间transition-duration( xx s )

  结合transform等属性，就能做出简单的css过渡动画。

  更多信息详见MDN文档。

杂の知识

• scss

  scss会被编译成普通的CSS，然后应用到HTML元素上。

  • 与Css的主要差别：
    • 支持嵌套，结构更清晰
    • 允许定义变量
    • ……

  知识点：

  • %：占位选择器，可通过@extend指令将其样式继承到其他选择器中，通常用于定义一组可以被多个选择器继承的样式。

    如：

    // 定义占位选择器
    %anchor {
      color: blue;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
        
    // 使用占位选择器
    a {
      @extend %anchor; // 继承样式
    }
        
    .button-link {
      @extend %anchor; // 继承样式
      background-color: lightgrey;
      padding: 10px;
    }
        
    

• 3秒后自动跳转到百度

  <meta http-equiv="refresh" content="3;http://www.baidu.com" >
  

• footer固定在网页底部

  https://www.freecodecamp.org/chinese/news/how-to-keep-your-footer-where-it-belongs/

• 登录页面（进阶）

  （比较复杂，目前我也没搞出过一个完整的能够前后端交互登录&登录后跳转的页面（是我太菜了））

  【前端】登陆页面：记住密码、设置cookie、加密_前端登录页面做一个记住密码-CSDN博客