初入web知识点

Posted 2020-08-09

◆过渡 transition 苹果浏览器前要加前缀 IE9不支持 多与hover配合使用
可以在不使用 Flash 动画或 javascript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
要实现这一点，必须规定两项内容：
①规定您希望把效果添加到哪个 CSS 属性上 规定属性名称
②规定效果的时长 ，以秒为单位 默认值是0
属性：
transition 简写属性，用于在一个属性中设置四个过渡属性
transition-property 规定应用过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间。默认值 0
transition-timing-function 规定过渡效果的时间曲线。默认值 "ease"
transition-delay 规定过渡效果何时开始。默认值0
◆动画 用于创建动画，可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
① 需要规定规则 @keyframes
* 在@keyframes规定某项样式 要加上浏览器兼容前缀IE9及以下不支持
* 必须要绑定选择器
② 动画名称（自己取）
③ 时长
④ animation 动画属性
⑤ 0%-100% from……to 这种方式只能规定两种样式 一般不用
例如：
div｛animation：自己取的名字，时长；
-moz-animation：自己取的名字，时长；
……
｝
在用@keyframes 空格 自己取得名字｛
0%｛background：red｝
50% ｛background：green｝
100% ｛background：blue｝
｝

◆兼容性
① 加前缀 ：
-moz- 火狐
-webkit- 苹果和谷歌
-o- 欧朋
②reset重置技术 和 Normalize技术
③<! DOCTYPE>解析模式
④CSShack技术 IE中夹前缀
IE6: -
IE7: *
IE8: \9 或 \0
（IE6、7是加在属性前。IE9是加在属性值后）
⑤条件注释
<！--[if lte IE6]>……<![endif]-->
lte IE6以下
gte IE6以上
gt IE6
⑥导入包（引入）
◆ 常见的兼容问题
解决办法
①透明度opacity → filtter
②png背景 → 导包（插件）
③圆角 → 导包、 图片
④BFC → zoom：1（数值随便）IE下触发BFC环境 又叫 haslayout技术
⑤IE浏览器有3px的差距 → 在float下加入 display：inline