2020-08-19

                                         *

CSS3小贴士(面无表情)*

Html html解析器
CSS CSS解析器
JS V8引擎
浏览器 浏览器渲染引擎(浏览器渲染是在异步队列里进行的,优先级比其他异步队列高,但没有那些解析器快)
(浏览器渲染相对于前三个靠代码实现的,是最慢的)
108.过渡效果transition
Transition-delay:延时时间
Transition-property:指定标签渐变
Transition-timing-function:变换的过程,比如线性,默认是ease先慢后快,有贝塞尔曲线属性以详细的改变变换过程
Transition-duration:变换需要几秒时间,默认第一个时间参数
109.简写属性的值不要写太多,否则很难维护
110.transition列表属性不一致时,会按照少的属性循环的次数走
111.在元素首次渲染还没有结束时,过渡是不会触发的
(翻译一下就是,浏览器看到你的颜色是最后的颜色,就认为不需要过渡效果)
112.JS代码解析会阻塞CSS渲染,所以一般要加上个window.onload();
113.监测过渡是否完成,有transitionend事件,当过渡效果完成时会自动触发
114.变形transform(4种):旋转routate 平移translate 斜切skew 缩放scale
115. 角度转弧度
角度/180Math.PI
弧度转角度
弧度180/Math.PI
116.transform属性组合时,运算是从右往左的,可以用矩阵推倒,因为矩阵的运算不满足交换律
117.元素垂直水平居中 在不知道宽高情况下,可以使用
但有兼容性问题
Left:50% top:50% transform(-50%,-50%);相对于自身走50%
118.图片有完美垂直水平居中解决方案（解决考虑高度问题以及兼容性问题）
Img{vertical-align:middle} div:after(包含块){
Content:””；
Display:”inline-block”;
vertical-align:middle;
Height:100%;
Width:0;
Background:随意;
}
119.景深越大，灭点越远，元素变形越小
景深越小，灭点越小，元素变形越大
120.transform-style:preservse-3d 3D舞台
让元素具有3D效果，Z轴上具有纵深
120.景深一般给最外层的元素,3D舞台给父类元素
121.Backface-visibility 旋转时元素的背面是否显示
122.CSS3 Animation动画属性
123.text-overflow:ellipsis 文本后有省略号
124.a标签伪类选择的顺序一般是(lvha)简称lovehate（link,
Visited,hover,active）visited只对部分样式起作用,link和visited属于链接伪类,也就是给a标签用的
125.Nth-of-type与nth-child相比,type只认标签,不认class id那些属性
126.粘性布局,就是最下面的div粘着上面的div,动态变化
127.伸缩容器:flex （就是那种很灵活的,可以代替浮动,又不改变文档流的容器,但如果宽高不合适时,会改变里面元素自身的大小）
设置flex display:flex display:inline-flex
flex的子元素顺序: flex-direction: row row-reverse cloumn cloumn-reverse
flex的换行: flex-wrap: wrap（换行）nowrap wrap-reverse
Flex-flow:复合属性 和background一样
128. 伸缩项目上的主轴对齐方式（X）
Justify-content：space-between项目之间留空白(左右贴边)
Space-around项目之间 之前 之后留空白(中间间隔是两边间隔的两倍)
Space-evenly项目之间 之前 之后留空白(中间和两边间隔均匀分布)
Flex-start:默认值 center:项目挤在中间 flex-end:项目挤在最右边
伸缩项目上的侧轴对齐方式(Y)
Align-items:stretch(默认值) 不设置项目的height或width时,height和width会被拉伸
Flext-start flext-end center
129.侧轴对齐的另一种方式:align-content只有在多个主轴或发生换行时才有效
130.伸缩项目 伸 flex-grow 默认是0
伸的项目大小=项目的原大小+(多出来项目的大小（自己的flex-grow/flex-grow总和）)
131.flex-basis代替主轴或侧轴的width或height,会使原先值失效 默认值为auto
132.Flex-shrink 默认是1 伸缩项目缩小
缩小后项目的大小=原项目大小-多出来项目大小(每一个项目大小*flex-shrink/所有项目加起来的大小)
133.flex 复合属性:grow shrink basis;
134.Flex:1 相当于flex:1 1 0为等分 flex:auto为1 1 auto flex:none为0 0 auto
135.概括一下 flex:1就是等分 flex:auto就是可伸可缩 flex:none就是默认的该多大就多大
136.order伸缩项目排序,默认是0,值越大越靠后
137.侧轴项目单独设置排序的属性:align-self和align-items一样,只不过是给一个项目用
138.多列布局 就是把内容分成不同的列 常用的属性有column-width column-count 将一个width切成几列,数值有冲突时,少的优先 比如1000px宽的页面 设置colum-width为200px时,会被切成4列(有间隙)**

CSS3知识体系大致包括以下模块:
1.选择器
2.自定义字体
3.新的UI方案
4.过渡* transition
5.2d/3d变形* transform perspective preserve-3d
6.动画* animation keyframes from{}to{}
7.布局扩展* flex收缩盒模型 圣杯布局 多列布局(column) 等分布局