CSS 知识总结

离冥
339 阅读3分钟

CSS是什么？

一个用来加样式的东西，他的厉害之处在于层叠样式表：

  • 样式层叠：可以多次对同一选择器进行样式声明

  • 选择器层叠：可以用不同选择器对同一个元素进行样式层叠

  • 文件层叠：可以用多个文件进行层叠

  • CSS 2.1是目前使用最广泛的CSS版本

  • CSS3 开始分模块细化

怎么知道浏览器支持哪些特性？

  1. 将各种浏览器都跑一遍
  2. 使用canisue.com查看哪些浏览器支持

文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.

display：inline

  • 元素从左到右排列，到达最右边才换行
  • 宽度为内部inline元素的和，不能用width指定
  • 高度由line-height间接决定，跟height无关

display：block

  • 元素从上到下，每一个都另起一行
  • block默认自动计算宽度，可用width指定（永远不要写宽度100%）
  • 高度由内部文档流元素决定，可以设定height

display：inline-block

  • 元素从左到右
  • 宽度可以设置width
  • 高度可以设置height

overflow溢出

  • overflow:auto是灵活设置，根据内容判断是否显示滚动条
  • overflow:scroll是永远显示滚动条
  • overflow:hidden是直接隐藏溢出部分
  • overflow:visible是直接显示溢出部分
  • overflow可以分为overflow-x和overflow-y

盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距，和实际内容。

一共有两种盒模型

  • content-box width=内容宽度（宽度只包含盒子内的部分）
  • border-box width=内容宽度+padding+border（宽度包含盒子内的内容，内边距和边框）

盒模型区别.png

浏览器渲染原理

浏览器渲染过程

  • 根据HTML构建HTML树（DOM）
  • 根据CSS构建CSS树（CSSOM）
  • 将两棵树合并成一颗渲染树（render tree）
  • layout布局（文档流、盒模型、计算大小和位置）
  • paint（把边框颜色、文字颜色、阴影等画出来）
  • compose合成（根据层叠样关系展示画面）

如何更新样式

一般用js来更新样式

div.style.background='red';
div.style.dispaly='none';
div.classListAdd('red');
div.remove()直接删掉节点；

三种更新方式：

  • js/css -> 样式 -> 布局 -> 绘制 -> 合成 比如：div.remove()
  • js/css -> 样式 -> 绘制 -> 合成 比如：改变背景颜色
  • js/css -> 样式 -> 合成 比如：改变transform

CSS动画的两种做法（transition 和 animation）

transform常用四个功能

  • 位移translate
  • 缩放scale
  • 旋转rotate
  • 倾斜skew
  • 一般需要配合transition过渡

transition过渡

语法

  • transition：属性名 时长 过渡方式 延迟 transition：left 200ms linear 1s
  • 也可以用逗号隔开两种不同属性 transition：left 200ms，top 200ms
  • display：none->block 不能过渡。一般改成visibili：hidden -> visible
  • background颜色和opacity透明度可以过渡
  • 过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps

animation

制作动画分两步走：1.先定义动画 2.调用动画

定义动画

@keyframes heart{
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.3);
  }
}

调用动画

缩写形式：animation：时长| 过渡方式| 延迟 |次数 |方向 | 填充模式 | 是否暂停 | 动画名 *　时长：1s或者1000ms

  • 过渡方式：跟transition取值一样
  • 次数：3或者2.4或者infinite(循环)
  • 方向：reverse/alternate/alternate-reverse
  • 填充方式：none/forwards/backwards/both
  • 是否暂停：paused/running
avatar
文章
阅读
粉丝