知识总结

1.transform 用于元素2d/3d转换

值：none 不转换 translate(x,y) 2d转换 translate3d(x,y,z) 3d转换 translateX(x) /Y(y)/Z(z) 只用xyz轴的值

2.transition 设置元素过渡效果

值:transition-property 指定CSS属性的name，transition-duration transition效果需要指定多少秒或毫秒才能完成,transition-timing-function 指定transition效果的转速曲线,transition-delay 定义transition效果开始的时候

transition-timing-function的值：linear 以相同速度开始到结束过渡

3.动画

@keyframes animationName{
from {}
to {}
}

4.布局

4.1正常布局流

​

I love my cat.

​

​

• Buy cat food

• ​

• Exercise

• ​

• Cheer up friend

• ​

4.2 浮动

浮动 float 清除浮动 clear

浮动特性

脱离文档流，不占原来的文档流位置
浮动元素在父元素中所占的面积的有效高度为0
非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

4.3定位

静态( staitc )定位 相对定位 position:relative; 绝对定位 position:absolute; 固定定位 fixed

5.样式优先级

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

心得体会

学习到今天 HTML和CSS差不多学完了，最大的感受是在解决任何HTML问题时首先要学会很对个属性的用法，在熟悉的基础上解决问题就很方便了。