CSS-Cascading(层叠)-------------------------------------------->解决冲突
Style Sheeets(样式表)->规则声明的集合->产生冲突->解决冲突
01层叠、优先级
1、样式表来源；2、选择器优先级（内敛>id>class=attribute=pseudo-class>pseudo-element)；3、源码位置
02、Grid和Flex布局的使用策略
Flex：一维布局；基于内容；浏览器兼容性更好
Grid：二维布局；基于布局；2017年后浏览器的版本普遍支持
大面积或整体布局，推荐使用Grid布局；小面积或组件中，或Grid item中可以使用Flex做灵活布局
03、定位Position
relative、absolute、fixed（元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置、sticky(元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto)的视口（scrollport）定位
04、层叠上下文：层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开。层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序；
响应式设计推荐遵循的原则：优先选用流式布局，如百分比、flex、grid等；使用响应式图片，匹配尺寸，节省带宽；使用媒体查询为不同的设备类型做适配；给移动端设备设置简单、统一的视口；使用相对长度，em、rem、vw做为长度度量
05媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print)以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。
使用媒体查询的一些Tips：1、媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个；2、由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择；3、由于断点的增加会增加样式处理的复杂度，所以尽量减少断点。
06、移动端的viewport
布局视口是页面中html元素（根元素）的包含块，默认情况下，window.document.documentElenment.clientWidth就是viewport的宽度。在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合需求，我们经常需要用标签对viewport进行设定，来完成移动端设备的适配。
07、vw和vh
vw：视窗宽度的1%
vh：视窗高度的1%。同样，vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。和rem方案类似。
08、语言增强---CSS预处理器
预处理器如何提高研发效率：1、自定义变量----提高可复用；2、嵌套、作用域----避免全局污染、结构层次清晰、减少复杂组合选择器；3、mixins、继承----提高可复用、可维护性；4、操作符、条件/循环语句、自定义函数---提高可编程能力、增加灵活性
虽然之前学习过css，但是这次的课程又有很多的遗忘和没有学到的东西，对于盒子模型，内容掌握还不够透彻，使用还有很多不熟练，还需要多练习，实践。
