Blink Docs

Appearance

css相关概念 ​

选择器的优先级和解析方式 ​

  • !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
  • 选择器从右往左解析，选择器越少越好
  • link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
  • 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
  • link可以使用 js 动态引入，@import不行

为什么要用预处理器 ​

  1. 嵌套，css代码更清晰
  2. 变量，统一样式
  3. mixin，复用css样式

line-height 1.5 与 150%的区别 ​

  • 父元素设置 1.5，子元素行高为子元素 fontsize*1.5
  • 父元素设置 150%，子元素行高为父元素 fontsize*150%

opacity: 0、visibility: hidden、display: none这三者的区别: ​

  1. 结构上:

    • display: none 会让元素完全从渲染树中消失, 渲染的时候不占据任何空间, 不能点击.

    • visibility: hidden 不会让元素从渲染树消失, 渲染元素继续占据空间, 只是内容不可见, 不能点击.

    • opacity: 0 不会让元素从渲染树消失, 渲染元素继续占据空间, 只是内容不可见, 可以点击.

  2. 继承性:

    • display: none 和 opacity: 0 是非继承属性, 子孙节点消失由于元素从渲染树消失造成, 通过修改子孙节点属性无法显示.

    • visibility: hidden 是继承属性, 子孙节点消失是由于继承了 visibility: hidden, 通过设置visibility: visible 可以让子孙节点显式.

  3. 性能:

    • display: none 修改元素会造成文档回流, 读屏器不会读取元素内容, 性能消耗较大.

    • visibility: hidden 修改元素只会造成本元素的重绘, 读屏器会读取元素内容, 性能消耗较少.

    • opacity: 0 修改元素会造成重绘, 性能消耗较少.

counter计数器方法 ​

计数器方法有 3 个，通常组合在一起使用

  • counter-reset
  • counter-increment
  • counter() / counters()
  1. counter-reset：计数器重置

创建一个计数器，或者将已经创建的计数器重置为指定值：

css
ol {
  /* 将 count 这个计数器重置为0，也可以不携带0这个参数，默认为0 */
  counter-reset: count 0;
}
  1. counter-increment：计数器累加

将已经创建的计数器重置为指定值，浏览器渲染时，遇到此属性会依次累加：

css
li {
  /* 将 count 这个计数器加上 1，这个属性可以写在伪元素样式中 */
  counter-increment: count 1;
}
  1. counter()：用于显示计算结果，该方法需要搭配伪元素的content属性一起使用：
css
li::before {
  /* 显示 count 计数器当前计算结果 */
  content: counter(count);
}
li::before {
  /* 搭配 list-style-type 可选值使用 */
  content: counter(count, upper-roman);
}

点击查看 list-style-type 可选值

  1. counters()：自动查找计数器的嵌套关系，并用指定的连接符链接，将结果显示出来：
html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
</ol>
css
ol {
  counter-reset: count;
  list-style: none;
}
li {
  counter-increment: count 1;
}
li::before {
  content: counters(count, '-');
}

变量 ​

  • 声明：--变量名称
  • 读取: var(--变量名称,默认值)
  • 类型：
    • 普通：只能用作属性值不能用作属性名
    • 字符：与字符串拼接 "Hello, "var(--name)
    • 数值：使用calc()与数值单位连用 var(--width) * 10px
  • 作用域
    • 范围：在当前元素块作用域及其子元素块作用域下有效
    • 优先级别：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

在js中读取和使用css变量

  • 读取变量：elem.style.getPropertyValue()
  • 设置变量：elem.style.setProperty()
  • 删除变量：elem.style.removeProperty()

Copyright © 2023-present Blink