语法：
选择器{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 透视
