CSS 专家密技笔记

CSS 专家密技笔记

自我笔记用CSS 专家密技CSS Coke讲解

CSS 取得 data-* 内容 (实用)

  .test {     &:after {      content: attr(data-tip) "可以塞多个字串";    }  }

加入 body 作 reset

  body {    line-height: 1.5;    // font-family: ;  }

Input 设置 focus 样式

CSS 专家密技第一集 40:40

可以作到 focus 换背景色按下 放大镜按钮 / Label 才显示 Input

  input {    width: 0;    transition: 1s;    &:focus {      width: 100px;      background-color: #eee;    }  }

a 连结

有顺序差异 必须注意! (CSS覆盖)

  a {    &:link{}    &:visited{}    &:focus{}    &:hover{}    &:active{}  }

flex & auto 玩法

原理是: auto 会将剩于空间拿来分配，谁有auto即拿一份

  // .parent > .child  .parent {    displaY:flex;    .child {      margin: auto; // 水平垂直居中      margin: 0 auto; // 水平居中      // 原本就靠左，Top 佔一份将该 child 推至底      margin-top: auto; // 子移至左下角    }  }  // .parent > .childA + .childB  .parent {    displaY:flex;    .childB {      // 会将 childB 推至最右边      margin-left: auto;    }  }

负数的 nth-child()

用来选择 1 至 n 个元素csscoke

  li { display: none; }  /* 选择第 1 至第 3 个元素并显示出来 */  // n=0 得3, n=1 得2, n=2 得1  li:nth-child(-n+3) {    display: block;  }

表格Cell 等宽

  .table { table-layout: fixed; } 

为破图定义样式

纯 CSS 範例如下亦可用 onerror 写在 HTML

  <!-- onerror 解法 -->  <img src="http://img2.58codes.com/2024/" onerror="this.onerror=null;this.src='default.jpg'" alt="">

  img {    display: block;    height: auto;    position: relative;    width: 100%;    &:before {      content: "抱歉找无此图片";      display: block;      margin-bottom: 10px;    }    // 告知图片路径而已    &:after {      // "字串" attr(src) "字串"      content: "(url: " attr(src) ")";      display: block;      font-size: 12px;    }  }

用 rem 来调整全域字体大小 & pxToRem()

在 HTML 设定基础字体大小用 em 来调整区域字体大小或用 pxToRem 一律採用 rem

  $base-font-size: 16px;  html {    font-size: $base-font-size;  }  .title {    font-size: pxToRem(25px);  }  // 统一转换成 rem  @function pxToRem($px) {    @if ($px == 0) { @return 0; }    @else {      @return $px / $base-font-size * 1rem;    }  }

用 rem 来调整全域字体大小 & pxToRem()

在 HTML 设定基础字体大小用 em 来调整区域字体大小或用 pxToRem 一律採用 rem

  $base-font-size: 16px;  html {    font-size: $base-font-size;  }  .title {    font-size: pxToRem(25px);  }  // 统一转换成 rem  @function pxToRem($px) {    @if ($px == 0) { @return 0; }    @else {      @return $px / $base-font-size * 1rem;    }  }

使用 :root 设定弹性的字体大小

vmin 抓视窗较小的那侧根据 ViewPort 改变字体大小

  :root { font-size: calc(1vw + 1vh + 0.5vmin); }