CSS3 浮动、定位、动画

语法：

选择器{float：属性值；}

浮动的特性

①浮动元素会脱离标准流

②浮动的元素会-行内显示并且元素顶部对齐.

③浮动元素会具有行内块元素的特性脱离标准流的控制受到指定位置

1、浮动的盒子不再保留原先的位置

2.如果多个盒子都设置了浮动,则它们会接照属性值一行内显示并且顶端对齐排列,请除浮动

①本质:就是清除浮动元素造成的影响

②如果父盒子本身有高度,则不需要清除浮动

语法:

选择器{ clear:属性值 ;}

left 左  right 右

both清除左右两侧的浮动. cear:both;  清除浮动的策略是:闭合浮动.

方法:

①额外标签法也称隔墙法.

②父级添加overflow属性

③父级添加after伪元素

④父级添加双伪元素

overflow: hidden 或者可以用auto或scroll   溢出显示隐藏 

CSS定位 position

定位的组成:

定位:将盒子还在某一个位置,所以还位也是在摆放盒子,按照定位的方式移动盒子.

定位=定位模式+边偏移 position

static.静态定位  relative相对定位

absolute 绝对定位  fixed 固定定位

相对定位、选择器{position: relative;}

特点:

1、相对于自己原来的位置来移动的

2.原来自在标准流的位置继续占有(不脱标,继续保留原来位置。)

绝对定位absolute

特点:

①若没有祖先,父无素没有定位,则以浏览器为准定位。

②若有定位,则以父元素为准定位.祖先,父都有定位,则以最近一级为准点

③绝对定位不再占有原先的位置.

子绝父相

子级是绝对定位的话,父级就要用相对定位

.①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子.。

②女盒子需要加定位限制子盒子在父盒子内显示.

②父盒子布局时,需要占有位置,因此父亲只能 特

是相对定位.固定定位:fixed

是元素固定于浏览器可视区的位置

特点:

①以浏览器的可视窗口为参照点移动元素
跟父元素没有任向关系不随滚动条滚动
②固定定位不占有原先的位置
固定定位也是脱标的,其实固定定位也可以看作是一种特殊的绝对定位.

粘性定位sticky
可以被认为是相对定位和固定定位的混合. 

语法:

{position:sticky; top; l0px;}

特点：

①以浏览器的可视窗口为参照点移动元素（固定）

②占有原先的位置(相对定位)
③必须添加top,bottom,right, left 才有效

定位的叠放顺序.
Z-index

选择器{z-index：1；}

数值可以是正整数.负整数或0,默认是auto数值越大,盒子越靠上.
②若属性值相同,则按照书写顺序,后来居上

③数字后不能加单位
④只有定位盒子才有z-index属性r
加了绝对定位的盒子不能通过 margin:0 auto 水平居中, 但可以通过以下计算方法实现水平和垂直居中。
1eft:50%;让盒子的左侧移动到父级元素的水平中心位置.

②margin-left：大小值;  让盒子向左移动自身亮度的一半.

1、浮动的的元素不会压住下面标准流的文字   

浮动的作用是：做文字环绕效果的,文字会围绕元素    
2.绝对定位(固定定位)会压住下面标准流所有的内容.    

元素的显示与隐藏
①display属性,用于设置一个元素应如何显示

visibility可见性
visibility:visible;元素可视

visibility:hidden元素隐藏

隐藏元素后,继续占有原来的位置.

overflow溢出    

scoll 溢出的部分显示滚动条,不溢出也显示

auto溢出的时候才显示,不溢出不显示滚动条

CSS3过渡效果        
transition:变化的属性 花费时间 运动曲线（ ease ）, 何时开始. 

   花费时间单位是S，并且必须要写单位。  
若想要所有的属性都变化过渡,写一个all就可以.
何时开始;单位是秒,可以设置延迟触发时间默认是0s

2D转换(transform)
可以实现元素的位移、旋转、缩放等效果移动:translate旋转:rotate缩放:scale
动民(animation)相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果.

①定义动画
②再使用调用动画.

keyframes定义动画.

keyframes动画名称{
0% {
          Width:100pX;
   }

100% {
         width:200px；
   }

}
3D转换.三维坐标系    translate3d    
特点:

①近大运小
②物体后面选挡不可见    

perspective 透视