hugh 的个人博客

温故而知新 - 层叠样式表

关键词语

  • 优先级(特殊性)

    • 0 0 0 1: 元素选择、伪元素选择(::before)
    • 0 0 1 0: 类选择器、属性选择、伪类选择(:hover)
    • 0 1 0 0: ID选择器
    • 0 0 0 0: 通配选择器 (*)
    • 意外情况: !important、:not伪类本身不计算
    • 注意点:优先级是基于选择就形式计算 如 #id 和 [id = "foo"]
    • 0特殊性比无特殊性要强 (继承的属性无特殊性
  • 继承和级联

  • 盒(框)模型 描述

    • 标准合模型
    • 怪异盒模型
    • box-sizing
  • 外边距合并

    • 块级元素上下外边距合并
    • 空的块级元素 demo
    • 相邻元素 demo
    • 父子元素 demo
  • 堆叠

    • 场景构成:
      • 根元素 (HTML)
      • z-index 值不为 "auto"的 绝对/相对定位
      • 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex
      • opacity 属性值小于 1 的元素(参考 the specification for opacity)
      • transform 属性值不为 "none"的元素
      • position: fixed
  • 块格式化上下文(BFC) 参考

  • 弹性盒子

    • flexBox
  • 网格布局

  • 媒体查询

    • 常用特性
    • 逻辑操作符 and not only
  • 包含块

    • position属性会影响包含块
    • 影响使用百分百设定的属性 demo
  • 简写属性

    • 边顺序: 上右下左, 如果是两个值则表示 上下、右左
    • 角顺序: 左上、右上、右下、左下, 如果是两个值: 左上右下、右上左下
    • 边界情况:没有设定的值会被设置为初始值demo
  • css值

    • 初始值、计算值、应用值、当前值
    • 计算出CSS属性的最终值有三个步骤。首先,指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值),或者默认值。然后,按规范算出 计算值computed value (例如, span 指定 position: absolute 后display 变为 block)。最后,计算布局(尺寸比如 auto 或 百分数 换算为像素值 ), 结果即 应用值used value。这些步骤是在内部完成的,脚本只能使用 window.getComputedStyle 获得最终的应用值。
  • 用户代理

  • BEM命名规范


标题:温故而知新 - 层叠样式表
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/03/18/1552894306852.html