《CSS 知识总结》

Tuogu
240 阅读4分钟

目录一览：
选择器
CSS 流式布局、盒模型
文档流
浏览器渲染原理
CSS 动画的两种做法
CSS动画优化

选择器

1、元素选择器；

ID 选择器: "#+ID 名"；
类选择器: ".+类名"；
通用选择器: "*" 选中所有元素；
属性选择器: 用[ ]将属性包起来；

2、组合选择器:

A,B:同时选中 A 和 B；
A B:选中 A 的后代 B；
A>B:选中 A 的直接子元素 B；
A+B:选中 A 的下一个相邻元素；
A~B:选中 A 后的 N 个相邻元素；

CSS 流式布局、盒模型

"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。 这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了"流"，它就会独立地工作。
在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。 因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。

CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

文档流

流动方向

inline元素从左到右，到达最右边才会换行
block元素从上到下，每一个都另起一行
inline-block也是从左到右

宽度

inline宽度为内部inline元素的和，不还能用width指定
block默认自动计算宽度，可用width指定
inline-block结合前面两点，可用width

高度

inline高度由line-height间接确定，跟height无关
block高度由内部文档流元素决定，可以设height
inline-block跟block类似，可以设置height

内联元素

HTML5中已经抛弃了「内联元素」的概念，所有元素都可以通过CSS变成内联的
内联元素不接受width和height设置宽高
内联元素的宽度由其内部的元素宽度总和决定
内联元素一般不能包含块级元素
内联元素的高度由line-height 间接确定

脱离文档流

float
position：absolute/fixed

浏览器渲染原理

浏览器根据以下步骤进行渲染：

· 根据HTML构建HTML 树(DOM)根据CSS构建CSS树(CSSOM)
· 两棵树合并成一颗渲染树(render tree)
· Layout布局(文档流、盒模型、计算大小和位置)
· Paint绘制（把边框颜色、文字颜色、阴影等画出·来)
· Compose合成(根据层叠关系展示画面)

CSS 动画的两种做法

css做动画效果经常用到的是transform与animation
transform有四个常用功能：transform: ranslate | scale | rotate | skew

1、位移translate;
2、缩放scale;
3、旋转rotate;
4、倾斜skew。

1.使用transform

transform一般都需要配合transition做过渡，下面使用transform和transition做缩放效果示例：
比如在html中一个id为show的div里，使用CSS给class为left的div确定一个宽度和高度各位100px的边框

<div id="show">
   <div class="left"></div>
 </div>

#show > .left {
  width: 50px;
  height: 50px;
  position: absolute;
  border:1px solid red;
  }
  /*设置好left类的div为一个正方形的动画对象*/

使用transform对这个方形进行缩放，预期效果是鼠标移到其上面会触发缩放效果即transform: scale(1.5);，CSS面向它的父级class=show做样式设置。
使用transition: all 1s;做<div id="show"></div>的动画过渡效果。

#show:hover {
  transform: scale(1.5);
}
#show {
  display: inline-block;
  transition: all 1s;
}
2.使用animation

用法：先用@keyframes+名称 声明关键帧，然后再用animation调用使用 同样使用上述提及的html元素

@keyframes beat {
  0% {
    transform: none;
  }
  100% {
    transform: scale(1.5);
  }
}

#heart {
  display: inline-block;
  animation: beat 1s alternate ;
}

CSS动画优化

浏览器渲染的三个步骤：布局，绘制，合成。
跳过布局和绘制，减少浏览器渲染步骤，作为提升性能的思路。

image.png

因此：
1、坚持使用 transform 和 opacity 属性更改来实现动画。
2、使用 will-change 或 translateZ 提升移动的元素。

两个属性符合条件 transforms 和 opacity

image.png

提升您打算设置动画的元素

应当将打算设置动画的元素（在合理范围内，不要过度！）提升放置到它自己所在的层

.moving-element {
  will-change: transform;
}

对于旧版浏览器，或者不支持 will-change 的浏览器:

.moving-element {
  transform: translateZ(0);
}
JS优化

使用requestAnimationFrame代替setTimeout或setlnterval。

以上内容为一些CSS的总结，后续有时间会继续补充。
avatar
文章
阅读
粉丝