基础知识
层叠(Cascading)、优先级
层叠三大规则
1.样式表来源
优先程度递减
2.选择器优先级
3.源码位置
盒模型
浏览器根据视觉格式化模型(visual formatting model),
将所有元素表示为盒子模型，css通过盒模型做layout
布局和定位
任意盒子的display
外部显示类型(display-outside):规定了该盒子如何与同一格式上下文中的其他元素一起显示。
内部显示类型(display-inside):规定了该盒子内部的布局方式。比如display:flex;其外部显示是block,参与BFC;display:inline-flex,则外部显示是inline,参与IFC。他们内部的盒子都参与弹性盒子布局。
层叠上下文(The stacking context)
变形、过渡、动画
transform变形3D
-
transform-origin:right top、50px30px等表示变形时依据的原点
-
transform-style:flat或preserve-3d看子元素的3d表现
-
perspective:观看点距离z=O这个平面的距离，可以在transform中用perspective（）使用作用为当前元素，也可以直接使用，给后代元素一个统一值
-
perspective-origin:观看者的位置，如top、bottom等
-
backface-visibility:：元素正面只有朝向观察者的时候可见
transition过渡
通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态
animation动画
@keyframes关键帧用来定义动画过程中出现的关键样式
响应式设计
响应式设计推荐遵循的原则
-
优先选用流式布局，如百分比、flex、grid等
-
使用响应式图片，匹配尺寸，节省带宽
-
使用媒体查询为不同的设备类型做适配
-
给移动端设备设置简单、统一的视口
-
使用相对长度，em、rem、vw做为长度度量
CSS生态相关
语言增强：预处理器、后处理器
工程架构：CSS模块化、CSS-n-Js、Atomic CSS
语言增强一一CSS预处理器
个人总结
CSS，主要是用来描述网页的。CSS是一种强大的工具，可以帮助我们创建各种类型的页面。它可以让我们轻松地设计和排版网页，提高网站的可读性和易用性。
