今天,我大致来总结一下我近期学习到的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选择器
分类
- 元素选择器;
- ID选择器,用“#”开头,加上ID名;
- 类选择器,用“.”开头,加上类名;
- 通用选择器,用“*”开头,选中的是页面上所有元素;
- 属性选择器,用“[ ]”开头,将属性包起来;
[attr]{ }
,选择包含attr属性的所有元素,不论attr的值是多少;[attr = val]{ }
,仅仅选择attr属性值为val的所有元素;[attr ~= val]{ }
,仅仅选择attr属性的值中包含val值的所有元素;[attr *= val]{ }
,选择attr属性中包含字符串val的元素;[attr ^= val]{ }
,选择attr属性的值以val开头(包含val)的元素;[attr $= val]{ }
,选择attr属性的值以val结尾(包含val)的元素;[attr |= val]{ }
,选择attr属性的值以val或者val-开头的元素;- 组合选择器
- A,B:表示同时选中A和B;
- A B:表示选中A的后代B;
- A>B:表示选中A的直接子元素B;
- A+B:表示选中A的下一个相邻元素;
- A~B:表示选中A后的N个相邻元素;
- AB:表示选中同时满足A和B的元素。
伪类
first-child
、last-child
、nth-child(n)
- 表示作为自己父级元素的第几个孩子。
first-of-type
、last-of-type
、nth-of-type(n)
- 表示作为自己父级当前标签类型的第几个孩子。
:link
- 选中未访问的链接。
:hover
- 选中鼠标放置上的链接。
:active
- 选中鼠标按下未松开时的链接。
:visited
- 选中访问过的链接。
使用顺序::link
----:visited
-----:active
-----:hover
:checked
- 选中被勾选的表单元素;
:disabled
- 选中被禁用的表单元素;
:focus
- 选中被激活的表单元素
:root
- 选中根节点
:target
- 选中页面中id为当前hash的元素
:not(xx)
- 选中不为xx的元素
伪元素
::before
、::after
- 在元素内插入一段内容,作为元素的第一个和最后一个孩子;
- 必须有content属性
- 常用来代替图标、无实际意义的标签
::first-line
- 选中段落第一行
::first-letter
- 选中段落第一个字符
::selection
- 匹配被鼠标选中的文字内容
CSS样式
样式来源
- 浏览器的默认样式;
- 通过继承得到的样式;
- 使用不同的选择器设置的样式。
样式的优先级顺序
样式的优先级判断的大规则为: !important > 内联属性样式 > 设置的样式 > 浏览器默认样式 > 继承的样式
优先级计算方法
关于选择器的优先级,有一个计算方法:
* 声明在style的属性(即内联属性),则千位得1;
* 选择器中含有ID选择器的,则百位得1;
* 选择器中包含类选择器、伪类或者属性选择器的,则十位得1;
* 选择器中包含元素、伪元素选择器的,则个位的1.
注意:其中通用选择器、组合符以及否定伪类都不会影响优先级的计算。
继承属性与控制继承
和文本相关的属性一般都会继承,一般的继承属性包含:color
、font-size
、font-family
、line-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的样式
- 让一个元素变为flex容器
display : flex;
或者display : inline-flex;
- 改变主轴流动方向
flex-direction:row
:从左向右flex-direction:row
:从右向左flex-direction:column
:从上到下flex-direction:column
:从下到上- 换行
flex-wrap:nowrap
:不换行flex-wrap:wrap
:换行flex-wrap:wrap-reverse
:从底部开始向上换行- 主轴对齐方式
justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
justify-content:space-evenly
- 次轴对齐方式
align-content:flex-start
align-content:flex-end
align-content:center
align-content:stretch
flex item的属性
- 在item中添加order,可以进行排序
- 在item中添加flex-grow,可以控制item如何变胖
- 在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优化
- 对于动画效果的实现,避免使用
setTimeou
t 或setInterval
,请使用 requestAnimationFrame。 - 将长时间运行的 JavaScript 从主线程移到 Web Worker。
- 使用微任务来执行对多个帧的 DOM 更改。
- 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。
缩小样式计算的范围并降低其复杂性
- 降低选择器的复杂性;使用以类为中心的方法,例如 BEM。
- 减少必须计算其样式的元素数量。
避免大型、复杂的布局和布局抖动
- 布局的作用范围一般为整个文档。
- DOM 元素的数量将影响性能;应尽可能避免触发布局。
- 评估布局模型的性能;新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
- 避免强制同步布局和布局抖动;先读取样式值,然后进行样式更改。
简化绘制的复杂度、减小绘制区域
- 除
transform
或opacity
属性之外,更改任何属性始终都会触发绘制。 - 绘制通常是像素管道中开销最大的部分;应尽可能避免绘制。
- 通过层的提升和动画的编排来减少绘制区域。
- 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销;应尽可能降低复杂性并减少开销。
坚持仅合成器的属性和管理层计数
- 坚持使用
transform
和opacity
属性更改来实现动画。 - 使用
will-change
或translateZ
提升移动的元素。
避免过度使用提升规则;各层都需要内存和管理开销。
使输入处理程序去除抖动
- 避免长时间运行输入处理程序;它们可能阻止滚动。
- 不要在输入处理程序中进行样式更改。
- 使处理程序去除抖动;存储事件值并在下一个 requestAnimationFrame 回调中处理样式更改。
CSS两种动画的做法
transform属性
包括四个常用的功能
* 位移 translate
* 缩放 scale
* 旋转 rotate
* 倾斜 skew
transition属性
作用:补充中间帧
语法:transition:属性名 时长 过渡方式 延迟
实例:通过transition实现一个跳动的红心
用transition属性实现的一个跳动的心
animation属性
语法:animation:时长 过渡方式 延迟 次数 方向 填充方式 是否暂停 动画名(每一个属性都有单独的名字)
实例:通过animation实现一个跳动的红心
用animation属性实现的一个跳动的心
结束语
这就是近期学习CSS的一些知识,希望自己能更加进步吧,大家一起加油!
版权声明
本内容版权归属本人及杭州饥人谷教育科技有限公司(简称:饥人谷)所有。
任何媒体、网站或个人未经授权不得转载、链接和转贴,或以其他方式复制、发布和发表。
对于违反者,将依法追究责任。