《CSS 知识总结》
回复数(1) 浏览数(238)
王睿泽 11月08日 17:19 最后回复来自: 海勒申 学习
{{topic.upvote_count || 0}} 编辑 回复

今天,我大致来总结一下我近期学习到的CSS的知识点,对这些内容进行一个回顾与整理。
我们大致从一下几方面进行整理和回顾:
1. CSS简介
2. CSS的选择器
3. CSS样式
4. 文档流与盒模型
5. CSS布局
6. CSS定位
7. CSS动画

CSS简介

CSS的历史

CSS的全称为:Cascading Style Sheets,层叠样式表。它是由李爵士的挪威同事赖先生在1994年提出的。

CSS的版本

目前使用最广泛的版本为CSS2.1,它是在2004年~2011年之间不断完善形成的。其他版本还包括1996年发布的CSS1,1998年发布的CSS2以及1999年就开始的CSS3.目前的CSS已经是分模块进行升级,所以并没有CSS4这种说法。

CSS特点

  • 样式层叠
  • 选择器层叠
  • 文件层叠

CSS选择器

分类

  1. 元素选择器;
  2. ID选择器,用“#”开头,加上ID名;
  3. 类选择器,用“.”开头,加上类名;
  4. 通用选择器,用“*”开头,选中的是页面上所有元素;
  5. 属性选择器,用“[ ]”开头,将属性包起来;
  6. [attr]{ },选择包含attr属性的所有元素,不论attr的值是多少;
  7. [attr = val]{ },仅仅选择attr属性值为val的所有元素;
  8. [attr ~= val]{ },仅仅选择attr属性的值中包含val值的所有元素;
  9. [attr *= val]{ },选择attr属性中包含字符串val的元素;
  10. [attr ^= val]{ },选择attr属性的值以val开头(包含val)的元素;
  11. [attr $= val]{ },选择attr属性的值以val结尾(包含val)的元素;
  12. [attr |= val]{ },选择attr属性的值以val或者val-开头的元素;
  13. 组合选择器
  14. A,B:表示同时选中A和B;
  15. A B:表示选中A的后代B;
  16. A>B:表示选中A的直接子元素B;
  17. A+B:表示选中A的下一个相邻元素;
  18. A~B:表示选中A后的N个相邻元素;
  19. AB:表示选中同时满足A和B的元素。

伪类

  1. first-childlast-childnth-child(n)
  2. 表示作为自己父级元素的第几个孩子。
  3. first-of-typelast-of-typenth-of-type(n)
  4. 表示作为自己父级当前标签类型的第几个孩子。
  5. :link
  6. 选中未访问的链接。
  7. :hover
  8. 选中鼠标放置上的链接。
  9. :active
  10. 选中鼠标按下未松开时的链接。
  11. :visited
  12. 选中访问过的链接。

使用顺序::link----:visited-----:active-----:hover

  1. :checked
  2. 选中被勾选的表单元素;
  3. :disabled
  4. 选中被禁用的表单元素;
  5. :focus
  6. 选中被激活的表单元素
  7. :root
  8. 选中根节点
  9. :target
  10. 选中页面中id为当前hash的元素
  11. :not(xx)
  12. 选中不为xx的元素

伪元素

  1. ::before::after
  2. 在元素内插入一段内容,作为元素的第一个和最后一个孩子;
  3. 必须有content属性
  4. 常用来代替图标、无实际意义的标签
  5. ::first-line
  6. 选中段落第一行
  7. ::first-letter
  8. 选中段落第一个字符
  9. ::selection
  10. 匹配被鼠标选中的文字内容

CSS样式

样式来源

  1. 浏览器的默认样式;
  2. 通过继承得到的样式;
  3. 使用不同的选择器设置的样式。

样式的优先级顺序

样式的优先级判断的大规则为: !important > 内联属性样式 > 设置的样式 > 浏览器默认样式 > 继承的样式

优先级计算方法

关于选择器的优先级,有一个计算方法:
* 声明在style的属性(即内联属性),则千位得1;
* 选择器中含有ID选择器的,则百位得1;
* 选择器中包含类选择器、伪类或者属性选择器的,则十位得1;
* 选择器中包含元素、伪元素选择器的,则个位的1.
注意:其中通用选择器、组合符以及否定伪类都不会影响优先级的计算。

继承属性与控制继承

和文本相关的属性一般都会继承,一般的继承属性包含:colorfont-sizefont-familyline-height
控制继承的属性大致有以下几种:
1. inherit
* 表示使用继承父级的样式,可以用来将本来不能继承的属性进行继承;
2. initial
* 表示使用该属性的初始值,但需要注意的是,该属性的初始值并不是浏览器的默认值;
3. unset
* 表示如果是继承属性就继承父级,如果不是继承属性,就使用该属性的初始值。

文档流与盒模型

文档流

文档流(Normal Flow),表示文档中元素流动的方向。包括:
1. display:block;
2. display:inline
3. display:inline-block

在新的HTML5的标准中,每一个元素既可以是内联元素,也可以是块级元素,只要看给他的display是什么

盒模型

有两种盒模型,分别为:
* content-box 内容盒 width = 内容宽度
* border-box 边框盒 width = 内容宽度 + padding + border
两种盒子如下图所示:

盒模型
盒模型

CSS布局

float布局

  • 子元素加上float:left或者float:right
  • 在其父元素上必须加上clearfix
    .clearfix { content:' '; display:block; clear:both; }

flex布局

这种布局方式一般擅长一维布局

flex container的样式

  1. 让一个元素变为flex容器
  2. display : flex; 或者 display : inline-flex;
  3. 改变主轴流动方向
  4. flex-direction:row:从左向右
  5. flex-direction:row:从右向左
  6. flex-direction:column:从上到下
  7. flex-direction:column:从下到上
  8. 换行
  9. flex-wrap:nowrap:不换行
  10. flex-wrap:wrap:换行
  11. flex-wrap:wrap-reverse:从底部开始向上换行
  12. 主轴对齐方式
  13. justify-content:flex-start
  14. justify-content:flex-end
  15. justify-content:center
  16. justify-content:space-between
  17. justify-content:space-around
  18. justify-content:space-evenly
  19. 次轴对齐方式
  20. align-content:flex-start
  21. align-content:flex-end
  22. align-content:center
  23. align-content:stretch

flex item的属性

  1. 在item中添加order,可以进行排序
  2. 在item中添加flex-grow,可以控制item如何变胖
  3. 在item中添加flex-shrink,可以控制item如何变瘦

grid布局

二维布局使用grid布局,这种布局尤其适合不规则布局

CSS定位

新的属性:position

static

是默认值,表示就呆在文档流里

relative

表示相对定位,但是还是没有脱离文档流。
* 一般用于位移
* 主要用于给absolute元素做父级
* 配合z-index使用(注意:默认每一个元素的z-index为auto,他计算出来的值为0,但是要记住auto与0不一样

absolute

表示绝对定位,要配合relative一起使用,定位基准是祖先元素中第一个position不是static的元素。
* 脱离原来的位置另起一层,比如对话框中的关闭按钮
* 实现鼠标提示

fixed

表示固定定位,定位基准是viewport(可能会出现bug)

层叠上下文

  • 每一个层叠上下文都是一个相互独立的空间
  • 每个空间中的z-index才可以进行比较,与外界的z-index无关。

通过一些不正交的属性 ,可以创建层叠上下文
* 根元素
* z-index值不为auto的绝对定位或相对定位元素
* opacity属性值小于1的元素
* transform的属性值不为none
* fixed与sticky定位
* z-index的值不为auto的flex子项

CSS动画

浏览器渲染过程

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

CSS动画优化

声明:这一部分内容摘抄引用自:CSS动画优化

JS优化

  • 对于动画效果的实现,避免使用 setTimeout 或 setInterval,请使用 requestAnimationFrame。
  • 将长时间运行的 JavaScript 从主线程移到 Web Worker。
  • 使用微任务来执行对多个帧的 DOM 更改。
  • 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。

缩小样式计算的范围并降低其复杂性

  • 降低选择器的复杂性;使用以类为中心的方法,例如 BEM。
  • 减少必须计算其样式的元素数量。

避免大型、复杂的布局和布局抖动

  • 布局的作用范围一般为整个文档。
  • DOM 元素的数量将影响性能;应尽可能避免触发布局。
  • 评估布局模型的性能;新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
  • 避免强制同步布局和布局抖动;先读取样式值,然后进行样式更改。

简化绘制的复杂度、减小绘制区域

  • transformopacity 属性之外,更改任何属性始终都会触发绘制。
  • 绘制通常是像素管道中开销最大的部分;应尽可能避免绘制。
  • 通过层的提升和动画的编排来减少绘制区域。
  • 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销;应尽可能降低复杂性并减少开销。

坚持仅合成器的属性和管理层计数

  • 坚持使用 transformopacity 属性更改来实现动画。
  • 使用will-changetranslateZ 提升移动的元素。
    避免过度使用提升规则;各层都需要内存和管理开销。

使输入处理程序去除抖动

  • 避免长时间运行输入处理程序;它们可能阻止滚动。
  • 不要在输入处理程序中进行样式更改。
  • 使处理程序去除抖动;存储事件值并在下一个 requestAnimationFrame 回调中处理样式更改。

CSS两种动画的做法

transform属性

包括四个常用的功能
* 位移 translate
* 缩放 scale
* 旋转 rotate
* 倾斜 skew

transition属性

作用:补充中间帧
语法:transition:属性名 时长 过渡方式 延迟
实例:通过transition实现一个跳动的红心
用transition属性实现的一个跳动的心

animation属性

语法:animation:时长 过渡方式 延迟 次数 方向 填充方式 是否暂停 动画名(每一个属性都有单独的名字)
实例:通过animation实现一个跳动的红心
用animation属性实现的一个跳动的心

结束语

这就是近期学习CSS的一些知识,希望自己能更加进步吧,大家一起加油!

版权声明

本内容版权归属本人及杭州饥人谷教育科技有限公司(简称:饥人谷)所有。
任何媒体、网站或个人未经授权不得转载、链接和转贴,或以其他方式复制、发布和发表。
对于违反者,将依法追究责任。

{{topic.upvote_count || 0}}

今天,我大致来总结一下我近期学习到的CSS的知识点,对这些内容进行一个回顾与整理。
我们大致从一下几方面进行整理和回顾:
1. CSS简介
2. CSS的选择器
3. CSS样式
4. 文档流与盒模型
5. CSS布局
6. CSS定位
7. CSS动画

CSS简介

CSS的历史

CSS的全称为:Cascading Style Sheets,层叠样式表。它是由李爵士的挪威同事赖先生在1994年提出的。

CSS的版本

目前使用最广泛的版本为CSS2.1,它是在2004年~2011年之间不断完善形成的。其他版本还包括1996年发布的CSS1,1998年发布的CSS2以及1999年就开始的CSS3.目前的CSS已经是分模块进行升级,所以并没有CSS4这种说法。

CSS特点

  • 样式层叠
  • 选择器层叠
  • 文件层叠

CSS选择器

分类

  1. 元素选择器;
  2. ID选择器,用“#”开头,加上ID名;
  3. 类选择器,用“.”开头,加上类名;
  4. 通用选择器,用“*”开头,选中的是页面上所有元素;
  5. 属性选择器,用“[ ]”开头,将属性包起来;
  6. [attr]{ },选择包含attr属性的所有元素,不论attr的值是多少;
  7. [attr = val]{ },仅仅选择attr属性值为val的所有元素;
  8. [attr ~= val]{ },仅仅选择attr属性的值中包含val值的所有元素;
  9. [attr *= val]{ },选择attr属性中包含字符串val的元素;
  10. [attr ^= val]{ },选择attr属性的值以val开头(包含val)的元素;
  11. [attr $= val]{ },选择attr属性的值以val结尾(包含val)的元素;
  12. [attr |= val]{ },选择attr属性的值以val或者val-开头的元素;
  13. 组合选择器
  14. A,B:表示同时选中A和B;
  15. A B:表示选中A的后代B;
  16. A>B:表示选中A的直接子元素B;
  17. A+B:表示选中A的下一个相邻元素;
  18. A~B:表示选中A后的N个相邻元素;
  19. AB:表示选中同时满足A和B的元素。

伪类

  1. first-childlast-childnth-child(n)
  2. 表示作为自己父级元素的第几个孩子。
  3. first-of-typelast-of-typenth-of-type(n)
  4. 表示作为自己父级当前标签类型的第几个孩子。
  5. :link
  6. 选中未访问的链接。
  7. :hover
  8. 选中鼠标放置上的链接。
  9. :active
  10. 选中鼠标按下未松开时的链接。
  11. :visited
  12. 选中访问过的链接。

使用顺序::link----:visited-----:active-----:hover

  1. :checked
  2. 选中被勾选的表单元素;
  3. :disabled
  4. 选中被禁用的表单元素;
  5. :focus
  6. 选中被激活的表单元素
  7. :root
  8. 选中根节点
  9. :target
  10. 选中页面中id为当前hash的元素
  11. :not(xx)
  12. 选中不为xx的元素

伪元素

  1. ::before::after
  2. 在元素内插入一段内容,作为元素的第一个和最后一个孩子;
  3. 必须有content属性
  4. 常用来代替图标、无实际意义的标签
  5. ::first-line
  6. 选中段落第一行
  7. ::first-letter
  8. 选中段落第一个字符
  9. ::selection
  10. 匹配被鼠标选中的文字内容

CSS样式

样式来源

  1. 浏览器的默认样式;
  2. 通过继承得到的样式;
  3. 使用不同的选择器设置的样式。

样式的优先级顺序

样式的优先级判断的大规则为: !important > 内联属性样式 > 设置的样式 > 浏览器默认样式 > 继承的样式

优先级计算方法

关于选择器的优先级,有一个计算方法:
* 声明在style的属性(即内联属性),则千位得1;
* 选择器中含有ID选择器的,则百位得1;
* 选择器中包含类选择器、伪类或者属性选择器的,则十位得1;
* 选择器中包含元素、伪元素选择器的,则个位的1.
注意:其中通用选择器、组合符以及否定伪类都不会影响优先级的计算。

继承属性与控制继承

和文本相关的属性一般都会继承,一般的继承属性包含:colorfont-sizefont-familyline-height
控制继承的属性大致有以下几种:
1. inherit
* 表示使用继承父级的样式,可以用来将本来不能继承的属性进行继承;
2. initial
* 表示使用该属性的初始值,但需要注意的是,该属性的初始值并不是浏览器的默认值;
3. unset
* 表示如果是继承属性就继承父级,如果不是继承属性,就使用该属性的初始值。

文档流与盒模型

文档流

文档流(Normal Flow),表示文档中元素流动的方向。包括:
1. display:block;
2. display:inline
3. display:inline-block

在新的HTML5的标准中,每一个元素既可以是内联元素,也可以是块级元素,只要看给他的display是什么

盒模型

有两种盒模型,分别为:
* content-box 内容盒 width = 内容宽度
* border-box 边框盒 width = 内容宽度 + padding + border
两种盒子如下图所示:

盒模型
盒模型

CSS布局

float布局

  • 子元素加上float:left或者float:right
  • 在其父元素上必须加上clearfix
    .clearfix { content:' '; display:block; clear:both; }

flex布局

这种布局方式一般擅长一维布局

flex container的样式

  1. 让一个元素变为flex容器
  2. display : flex; 或者 display : inline-flex;
  3. 改变主轴流动方向
  4. flex-direction:row:从左向右
  5. flex-direction:row:从右向左
  6. flex-direction:column:从上到下
  7. flex-direction:column:从下到上
  8. 换行
  9. flex-wrap:nowrap:不换行
  10. flex-wrap:wrap:换行
  11. flex-wrap:wrap-reverse:从底部开始向上换行
  12. 主轴对齐方式
  13. justify-content:flex-start
  14. justify-content:flex-end
  15. justify-content:center
  16. justify-content:space-between
  17. justify-content:space-around
  18. justify-content:space-evenly
  19. 次轴对齐方式
  20. align-content:flex-start
  21. align-content:flex-end
  22. align-content:center
  23. align-content:stretch

flex item的属性

  1. 在item中添加order,可以进行排序
  2. 在item中添加flex-grow,可以控制item如何变胖
  3. 在item中添加flex-shrink,可以控制item如何变瘦

grid布局

二维布局使用grid布局,这种布局尤其适合不规则布局

CSS定位

新的属性:position

static

是默认值,表示就呆在文档流里

relative

表示相对定位,但是还是没有脱离文档流。
* 一般用于位移
* 主要用于给absolute元素做父级
* 配合z-index使用(注意:默认每一个元素的z-index为auto,他计算出来的值为0,但是要记住auto与0不一样

absolute

表示绝对定位,要配合relative一起使用,定位基准是祖先元素中第一个position不是static的元素。
* 脱离原来的位置另起一层,比如对话框中的关闭按钮
* 实现鼠标提示

fixed

表示固定定位,定位基准是viewport(可能会出现bug)

层叠上下文

  • 每一个层叠上下文都是一个相互独立的空间
  • 每个空间中的z-index才可以进行比较,与外界的z-index无关。

通过一些不正交的属性 ,可以创建层叠上下文
* 根元素
* z-index值不为auto的绝对定位或相对定位元素
* opacity属性值小于1的元素
* transform的属性值不为none
* fixed与sticky定位
* z-index的值不为auto的flex子项

CSS动画

浏览器渲染过程

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

CSS动画优化

声明:这一部分内容摘抄引用自:CSS动画优化

JS优化

  • 对于动画效果的实现,避免使用 setTimeout 或 setInterval,请使用 requestAnimationFrame。
  • 将长时间运行的 JavaScript 从主线程移到 Web Worker。
  • 使用微任务来执行对多个帧的 DOM 更改。
  • 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。

缩小样式计算的范围并降低其复杂性

  • 降低选择器的复杂性;使用以类为中心的方法,例如 BEM。
  • 减少必须计算其样式的元素数量。

避免大型、复杂的布局和布局抖动

  • 布局的作用范围一般为整个文档。
  • DOM 元素的数量将影响性能;应尽可能避免触发布局。
  • 评估布局模型的性能;新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
  • 避免强制同步布局和布局抖动;先读取样式值,然后进行样式更改。

简化绘制的复杂度、减小绘制区域

  • transformopacity 属性之外,更改任何属性始终都会触发绘制。
  • 绘制通常是像素管道中开销最大的部分;应尽可能避免绘制。
  • 通过层的提升和动画的编排来减少绘制区域。
  • 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销;应尽可能降低复杂性并减少开销。

坚持仅合成器的属性和管理层计数

  • 坚持使用 transformopacity 属性更改来实现动画。
  • 使用will-changetranslateZ 提升移动的元素。
    避免过度使用提升规则;各层都需要内存和管理开销。

使输入处理程序去除抖动

  • 避免长时间运行输入处理程序;它们可能阻止滚动。
  • 不要在输入处理程序中进行样式更改。
  • 使处理程序去除抖动;存储事件值并在下一个 requestAnimationFrame 回调中处理样式更改。

CSS两种动画的做法

transform属性

包括四个常用的功能
* 位移 translate
* 缩放 scale
* 旋转 rotate
* 倾斜 skew

transition属性

作用:补充中间帧
语法:transition:属性名 时长 过渡方式 延迟
实例:通过transition实现一个跳动的红心
用transition属性实现的一个跳动的心

animation属性

语法:animation:时长 过渡方式 延迟 次数 方向 填充方式 是否暂停 动画名(每一个属性都有单独的名字)
实例:通过animation实现一个跳动的红心
用animation属性实现的一个跳动的心

结束语

这就是近期学习CSS的一些知识,希望自己能更加进步吧,大家一起加油!

版权声明

本内容版权归属本人及杭州饥人谷教育科技有限公司(简称:饥人谷)所有。
任何媒体、网站或个人未经授权不得转载、链接和转贴,或以其他方式复制、发布和发表。
对于违反者,将依法追究责任。

238
回复 编辑