css基础知识3

元素的转换

元素转换之前，先补充一点知识：
块级元素：
1.每个块级元素都从新的一行开始，并且其先后的元素也另起一行
2.元素的高度，宽度，行高以及顶和底边距都可设置
3.元素的宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一样）除非设置一个宽度
块级元素：div ，p, h1~h6, form , ol, ul , dl, address,blockquote
行内元素
1.和其他元素在一行上
2.元素的高度，宽度，行高以及顶部和底部边距不可设置
3.元素的宽度就是他包含的图片或文字 的宽度，不可改变
行内元素：a , span , br , i , em , strong , label ,
行内块元素
1.和其它元素在一行上
2.元素的高，宽，行高以及顶部和底边距都不可设置
行内块元素：img ， input ， select ，

元素的转换让行内元素具有块级元素的某些属性
inline：显示为行内元素。（行内元素默认的display）
block：显示为块级元素
inline-block：显示为行内元素，可对其设置宽高和对齐等属性，但该元素不独占一行（行内块元素）
none：元素被隐藏，不显示，也不占用空间，相当于不存在

元素的初始化的原因：
浏览器内核不同，对标签默认样式的解析不同，导致页面呈现出的样式不同
清除样式圆点：ul,ol{list-style:none;}

cursor：pointer；把鼠标指针变成小手的形状

css的高级应用

过渡

transition：property   transition-duration   transition-delay   transition-timing-function；

1.transition-property：none|all |property；
指定应用过渡效果的css属性名称其过渡效果通常在用户将指针移动到元素上发生
none：没有属性会获得过渡效果
all：所有的属性都将获得过渡效果
property：定义应用过渡效果的css属性名称，多个名称之间以逗号分开
2.transition-duration：time；
定义过渡效果花费的时间，默认为0
3.transition-delay：time；
time为正，过渡时间会延迟
为0不会有任何效果
为负，从该时间开始，之前的被截断
4.transition-timing-function 属性
linear：以相同的速度开始至结束的过渡效果。等同于cubic-bezier（0，0，1，1）
ease：以慢速度开始，然后加快，最后慢慢结束过渡效果
ease-in：慢速开始，然后逐步加快
ease-out：慢速结束，然后逐步加快
ease-in-out：慢速开始和结束
cubic-bezier（n，n，n，n）加速度或减速度的贝塞尔曲线

动画

@keyframes name{}
animation:name   duration   delay   count   state;
name :使用@keyframes定义的动画
duration：定义过渡效果花费的时间，默认为0
count：设置数字/infinite无穷大
animation-direction：动画反向播放normal（正常）/alternate（反）
animation-play-state：设置播放状态 paused/running
animation-fill-mode：forward动画保持最终状态
transform
位移：
属性：translate（x，y）
x水平方向位移
y垂直方向的位移（可省略，省略表示垂直方向没有位移）
旋转：
rotate（angle）
表示顺时针旋转angle角度，单位通常为deg
rotateX（）围绕X轴旋转
rotateY（）围绕Y轴旋转
缩放
scale（x，y）
水平方向缩放比为x，垂直方向缩放比为y，y省略表示等比缩放
scaleX（x）：元素水平方向缩放比
scaleY（y）：元素垂直方向缩放比
扭曲
skew（anglex，angleY）
沿着X轴方向倾斜angle角度，沿着Y轴方向倾斜angleY角度
skewY（)沿着y轴方向倾斜angleY角度
skewX（）沿着x轴方向倾斜angleX角度
旋转中心点
transform-origin
默认50% 50%
第一个值表示旋转中心点的水平位置
第二个值表示旋转中心点的垂直位置
可以设置top ，bottom， right， left

3D视图

transform-style：用来嵌套子元素在3D空间上的展示效果。
属性：
flat：子元素不保留其3D位置，默认值
preserve-3d：子元素保留3D位置
perspective
设成透视效果，透视为近大远小，属性值用来设置3D元素距离视图的距离，单位为px
perspective-origin
基于x轴和y轴，改变3D元素的底部位置，该值取值同transform-origin，默认为50% 50%