本节课将学习以下知识：
CSS基础
布局和定位
层叠上下文
变形，过渡，动画
响应式设计
一.css基础
优先级程度判断
首先看样式表的来源，然后判断选择器优先级，如果优先级相同，就判断源码位置，对于@import的样式，就是根据@import的顺序，对应link和style便签的样式，则根据在document中的顺序决定。
伪类函数选择器（逻辑选择器）：:is(), :has(), :where(), :not()
CSS选择器优先级：内联 > id > 类=属性 > 便签选择器
内联样式不属于选择器，:is(),:not()本身不计入优先级，以参数中最高的优先级为准，:where（）优先级为0
层叠、优先级
由层叠概念引申出的css代码:
首先选择器尽量少用id写样式，id不利于css的复用，并且id选择器的优先级较高，不利于后续的覆盖。
尽量不用！important,他的级别是最高的，后续如果要扩展或者灵活性的变化也会被压缩。
自己的样式加载在引用库样式的后面。保证自己的样式生效。
CSS选择器构成：
属性+冒号（:）+值+单位。
值：
文字类：比如initial这种关键字，颜色，位置等
数值类：比如z-index:1,或者带有单位的数值，百分比
函数生成：比如calc（），min(), max()等
单位:长度分为绝对长度（px,pt,cm,in）和相对长度(em,rem,ex,rex,vw,vh...)
角度：deg，grad，turn,rad
时间：s,ms
分辨率：dpi, dpcm,dppx
盒模型：
实现三角形：
//html
<div class="triangle-bottom"></div>
//css
.triangle-bottom {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}
实现固定比例矩形：
//html
<div class="ratio-box"><div>
//css
.ratio-box {
background-color:cadetblue:
//width:100%;
height:0;
padding:0;
//padding-bottom:75%;
}
实现水平居中：
//html
<div class="wrap">
<div class="h-center"></div>
</div>
//css
.wrap {
width:100%;
height:80px;
border:1px dashed grey;
}
.h-center {
width:100px;
height:50px;
backgrofund-color: navajowhite;
margin:10px auto;
}
实现渐变框：
//html
<div class="awesome-border"></div>
//css
.awesome-border {
width:150px;
height:100px;
border:8px solid transparent;
border-radius: 12px;
background-clip: padding-box, border-box;
background-origin:padding-box,border-box;
background-image:
linear-grandine(to right, #fff, #fff),
linear-gradient(135deg,#e941ab,#a557ef);
}
在padding，border，margin中只有margin可以设置负值，设置左边或顶部的负外边距,元素就会相应地向左或向上移动，导致元素与它前面的元素重叠，如果设置右边或者底部的负外边距,并不会移动元素,而是将它后面的元素拉过来;
二.布局和定位
常规流布局：
块级格式化上下文：
格式化上下文的布局规范为
“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由"margin"属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合)。"
我们平时说的BFC是什么呢?
BFC本身是block formatting context的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是flow-root,其实就是这个盒子内部形成了一个新的块级格式化上下文。
如何触发一个盒子的BFC特性?
以下条件满足任何一个即可
display: flow-root l inline-block;
position: absolute | fixed;float:
不为none;
overflow:不为visible
外边距塌陷问题
哪些情况会出现外边距塌陷问题：
1.两个兄弟元素之间相邻的上下外边距
2.父子元素之间相邻的上下外边距
3.内容为空元素自己上下外边距相邻
清除外边距的办法
在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻;
在父子元素重叠时，除了上述方法，还可以设置父元素为BFC,使得父子不在同级BFC中
内联级格式化上下文：
“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。
弹性盒子模型
Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。
flex和grid的区别：
flex是一维布局，grid是二维布局
flex是基于内容写的,grid是基于布局写的
flex兼容性好,grid兼容性略差
大面积或整体布局推荐使用grid,小面积或组件可以使用flex灵活使用。
三.层叠上下文
层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
形成层叠上下文的条件：
position: relative 或absolute;并且z-index不是auto
position: fixed或 sticky
flex或 grid的子元素;并且 z-index不是auto
opacity 的值小于1
transform的值不为none
will-change的值不为通用值
编写z-index 的建议： 1，使用css变量或者预处理语言的变量，管理z-index的值 2.将预设间隔设置10或者100，方便后续的插入。
四.变形，过渡，动画
- transform变形：
2D相关属性:
transform: translate(移动)、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等
transform-origin: right top、center等表示变形时依据的原点
3D相关属性:
transform: translate3d . rotate3d、scale3d、matrix3d等
transform-origin: right top、50px 30px等表示变形时依据的原点
transform-style: flat 或 preserve-3d看子元素的3d表现
perspective:观看点距离z=O这个平面的距离，
可以在transform中用perspective()使用作用为当前元素，也可以直接使用，给后代元素一个统一值 perspective-origin:观看者的位置，如top、bottom等
backface-visibility︰元素正面只有朝向观察者的时候可见
- transition过渡
通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态
- animation动画
@keyframes 关键帧用来定义动画过程中出现的关键样式
animation-*相关属性用来为元素添加动画
如何写动画性能更好?
1.尽量不用触发reflow的属性 2.在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等 3.尽量使用transform和opacity 去写动画
五.响应式设计
媒体查询是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询
@media mediatype and|not|only (media feature){
css-code;
}
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如 screen、print)以及媒体特性〈如视口宽度、屏幕比例、设备方向:横向或纵向)做为约束条件。
媒体查询同样遵循cascading层叠覆盖原则，min-和max- 选择一个由于设备的多样化逐渐不可枚举,断点的选择尽量根据内容选择 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点
设备像素
设备像素(物理像素)︰显示器上绘制的最小单位,显示屏通过控制每个像素点的颜色,使屏幕显示出不同的图像。
设备像素和设备相关，屏幕从工厂出来那天起,它上面的物理像素点就固定不变了。
移动端的viewport
布局视口(viewport)是页面中html元素(根元素)的包含块，默认情况window.document.documentElement.clientWidth 就是viewport的宽度。
在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合需求，我们经常需要用标签对viewport进行设定，来完成移动端设备的适配。
默认iPhone的viewport可以认为是:
<meta name="viewport" content="width=980">
其中initial-scale，在未设定时，如果width设定了，那么它会自动设置放缩值: initial-scale =屏幕宽度(例子中是390) / 980～ 0.398相比scale=1的时候，缩小了0.398倍
css预处理器
scss,less,stylus简单对比：
postcss机制浅析：
课程总结：
