跳到主要内容

css 绪论

css 工作原理​

浏览器解析 css 原则​

浏览器解析 css 原则​
  • 成功解析则应用；
  • 否则忽略；

样式表​

css rule 结构​

css rule 结构

外部样式表​

  • link 标签；
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内部样式表​

  • style 标签；
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内联样式​

  • style 属性；
  • 如无必要，请勿使用；
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

基本语法​

空白​

分类​
  • 空格；
  • 换行符；
  • 制表符；
浏览器空白机制​
  • 浏览器忽视空白；
作用​
  • 分隔属性值；
  • 代码可读性；

css 注释​

/* comment */

回流和重绘​

基本概念​

回流(重排)​
  • 页面元素布局或几何属性发生变化；
  • 浏览器重新构建布局树，进而重新绘制页面；
  • 回流具有极高的性能耗费；
重绘​
  • 页面元素样式发生变化；
  • 浏览器重新绘制元素样式，即更新渲染树，但不会改变布局树；
  • 重绘代价相对于回流较低，但依旧具有一定的性能耗费；
回流与重绘的关系​
  • 回流一定导致重绘；
  • 重绘不一定导致回流；

触发操作​

回流​
  • 修改窗口；
    • 尺寸；
  • 修改文本样式；
    • 大小；
    • 字体类型；
  • 修改元素；
    • 盒子模型布局相关；
    • 子元素；
  • 修改布局；
    • float/clear；
    • display；
  • 添加/删除样式表；
重绘​
  • 修改元素样式；
    • 元素颜色；
    • 可见性/透明度；
    • 盒子模型样式相关：radius/shadow；
  • 修改文本样式；
    • 文本装饰；
    • 字体属性；
  • 修改背景；
    • 背景图片；
    • 背景颜色；

优化​

  • 避免频繁修改元素样式：使用添加/删除类名改变样式；
  • 使用 transform 改变元素位置和大小；
    • 只影响浏览器渲染中的 draw 阶段；
  • 对于频繁变化的元素，使用 absolute 布局使其脱离文档流，避免影响其他元素；
  • 隐藏而非删除 DOM 元素；
  • 多次操作的元素进行缓存；

documentFragment​

  • 轻量级的 DOM 类型，不会渲染到页面上；
  • df 可以在内存中操作 DOM 节点，而不会引起回流和重排；
  • 可使用 df 减少对于 DOM 的操作次数，机制类似于虚拟 DOM；
// 创建一个documentFragment对象
var frag = document.createDocumentFragment();
// 创建多个li元素并添加到documentFragment中
for (var i = 0; i < 10; i++) {
  var li = document.createElement("li");
  li.innerText = "List item " + i;
  frag.appendChild(li);
}
// 将documentFragment一次性添加到ul中
document.querySelector("ul").appendChild(frag);

css 预处理器​

基本概念​

  • 用于 css 的编程语言；
  • 拓展 css 语法和特性；
  • 提高 css 的编程能力，可复用性和可维护性；

常见 css 预处理器​

  • sass；
  • less；
  • stylus；

常见特性​

  • 变量：提高 css 复用性；
  • 作用域；
  • 代码混入：将一部分样式单独处理，作为单独定义的模块；
  • 嵌套；
  • 模块化；

css3 新特性​

  • 选择器；
  • 长度单位：rem/vw/vh；
  • 边框属性；
    • border-radius；
    • box-shadow；
  • 背景属性；
    • background-clip；
    • background-origin；
    • background-size；
  • 自定义字体；
  • 文字属性；
    • word-warp；
    • text-overflow；
    • text-shadow；
    • text-decoration；
  • 媒体查询；
  • 颜色；
    • rgba 和 hsla；
    • linear/radial-gradient；
  • 布局：flex/grid/多列布局；
  • 动画；
    • transition；
    • transform；
    • animation ；

css in js 和原子化 css​

css in js​

基础​
  • 使用 js 定义 css 样式；
  • 运行时动态生成 css 样式；
优点​
  • 无全局样式冲突；
  • 实现动态样式；
  • 减少命名冲突；
  • 与 js 结合便于组件化，模块化；
缺点​
  • 运行时动态生成，降低渲染性能；
  • 增加包体积；
  • 调试困难；

原子化​

基础​
  • 定义原子化 css，将 css 样式分解为规模小，独立的单元；
  • 使用不同原子化 css 的组合实现复杂样式；
优点​
  • 命名固定且唯一，减少命名负担和命名冲突；
  • 样式复用性强，减少包体积，提高渲染性能；
  • 自带设计系统，样式统一；
  • 状态管理和响应式设计；
缺点​
  • 记忆负担；
  • 复杂样式命名过多，难以阅读和维护；