桐——前端005（浮动，定位，过渡，2D转换，动画）

css传统三种布局

css标准流

垂直排列的盒子用标准流布局

• 标签按规定好的默认方式排列。
• 块级元素独占一行，行内元素按序从左到右排列。

css浮动

飞起来。（本意是做文字环绕效果的，因此不遮挡文字，图片）

• 可以改变标签的默认排列方式，让块级盒子一行排列。

• 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

• 语法：选择器{float:属性值；}

属性值	描述
none	不浮动
left	向左浮动
right	向右浮动

• float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

• 浮动元素会脱离标准流，不再保留原先的位置，其余标准流顶替其位置。（脱标）
• 浮动的元素会一行内显示，并且元素顶部对齐。
• 浮动的元素会有行内块元素的特性。（可以为span 加float属性，那么span具有行内块特性）

• 浮动的盒子是紧挨一起的，中间无缝隙。
• 浮动的元素经常和标准流父级搭配使用，先用标准流父元素排列上下的位置，之后内部子元素采取浮动排列左右位置。
• 想让浮动的盒子之间有缝隙，可以加margin
• 当父盒子中子盒子太多，无法给父盒子确切的高度时，想让子盒子撑开父盒子高度，可以清除浮动元素造成的影响。（但是不给父盒子高度，下面的标准流会占据父盒子的位置。因此，要清除浮动）语法：选择器{clear:属性值；}

属性值	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除两侧浮动的影响

清除浮动的方法

为什么清除浮动？
1.父级没有高度
2.子盒子浮动了
3.影响下面布局了

1.额外标签法
2.给父元素加overflow属性
3.给父级加after伪元素
4.给父级加双伪元素

• 额外标签法
  • 在最后一个浮动子元素后加一个空标签，例如<div style="clear:both"> </div>,要求空标签必须是块级元素。
• 给父级加overflow属性
  • 属性值设置为hidden/auto/scroll
  • 缺点：无法显示溢出部分
• 为父级加after伪元素

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	*zoom:1;/*照顾低级浏览器*/
}
...
为父级div加上<div class="clearfix">
（其中clearfix是自定义的名字）

• 为父级加上双伪元素

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;/*照顾低级浏览器*/
}
...
为父级div加上<div class="clearfix">
（其中clearfix是自定义的名字）

定位

可以让多个盒子前后叠压

• 让某个元素可以在盒子内自由的移动位置，或者固定在屏幕中的某个位置，并且可以压住其他盒子

• 浮动可以让多个块级盒子没有缝隙排列显示，经常用于横向排列盒子
• 定位=定位模式+边偏移（定位模式：指定一个元素在文档中的定位方式。边偏移：决定了该元素的最终位置。）
• 定位模式 用position属性设置 position:static;

属性值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

• 边偏移 top,bottom,left,right四个属性
  top:80px;定义元素相对于其父元素上边线距离。 bottom:80px;定义元素相对于其父元素下边线距离。......

静态定位（static）

 元素默认定位方式，即，无定位，按标准流安排位置。

相对定位（relative）

1.相对于它原来的位置说的
2.原来在标准流的位置继续占有（不脱标），后面的盒子不会占用它的位置。（人走了，位置留着。）
3.用来给绝对定位当‘爹’。

绝对定位（absolute）

1.相对父元素的定位。
2.没有父元素，或者父元素没有定位，以浏览器为准定位。
3.若父元素有定位（相对，绝对，固定），则以最近一级的有定位先祖元素为参考点，移动位置。
4.绝对定位不再占有原先的位置。

子绝父相

• 子元素绝对定位，父元素相对定位。

固定定位

    1.固定于浏览器可视区域的某个位置。
    2.以浏览器可视窗口为参照点。
    3.不随页面滚动。
    4.跟父元素无关。
    5.不占有原先位置。
    6.固定到版心：让固定的盒子left:50%;让该盒子margin-left:版面宽度的一半的距离;

粘性定位

1.相对定位和固定定位的结合。
2.选择器{ position:sticky ;top:10px; }
3.以浏览器可视窗口定位。
4.占有原先位置。
5.必须添加上，下，左，右 边偏移中的一个。

定位的叠放顺序

1.可以用z-index控制盒子的前后次序（z轴）
2.选择器{ z-index;1; }
3.数值可以是正整数，负整数，0。数值越大，越在上边。
4.如果数值相同，按书写顺序来，后来居上。
5.数字后不加单位。
6.z-index是有定位的盒子才有的属性。

加了绝对定位的盒子不可以用margin:0 auto;实现居中。
可以：left:50%; margin:-(盒子本身宽度的一半);达到水平居中效果。垂直居中同理。

定位的特殊性质

• 加了绝对或固定定位的行内元素 ，可以直接设置宽度和高度。
• 块级元素加了绝对或固定定位，不给宽高，默认是内容大小。
• 脱标的盒子不会触发外边距合并（塌陷） 。

• 浮动元素只会压住下面标准流的盒子，但不会压住下面标准流盒子中的文字（图片）

• 绝对定位 或 固定定位 会完全压住盒子，即会压住里边的文字，图片等。

css过渡

• 过渡动画：是一个状态渐渐的过渡到另外一个状态

• 经常与:hover一起搭配使用。

• transition：要过渡的属性 花费时间 运动曲线 何时开始；

1.属性：想要变化的css属性，宽高，背景颜色，内外边距都可以，如果想要所有属性都过渡，写一个all即可。
2.花费时间：0.5s，必须写单位。
3.运动曲线：默认是easy。（可以省略）
4.何时开始：单位是秒。可以设置延迟触发时间，默认是0s（可以省略）
5.谁做过渡给谁加transition。

div{
	width:200px;
	...
	transition:width 0.5s;
}
div:hover{
	width:400px;
}

如果想要写多个属性，用逗号分隔，不可以分成两次写
transition:width 0.5s; height: 1s;

css2D转换

• transform实现元素的位移（translate），旋转（rotate），缩放（scale）等
• 移动盒子的位置：定位，外边距（margin），2D转换

• • transform: translate(x,y);
    1.x,x轴移动的距离。y,y轴移动的距离。
    2.translate不会影响其他元素的位置。
    3.translate对行内标签无用。

• • transform:rotate(45deg);
    1.()里是度数，单位是deg。
    2.角度为正，顺时针旋转。为负，逆时针旋转。
    3.默认旋转中心是元素的中心点。
    4.转换中心点transform-origin:x y;x,y可以是top,left,bottom,right,100px…例如transform-origin:left bottom;是以左下角为旋转点。

• • transform:scale(x,y);
    1.scale(2,2); 宽高都放大2倍 =scale(2);
    2.scale(1,1); 相当于没变化。
    3.scale(0.5,0.5); 缩小。
    4.scale缩放优势，可以设置转换中心点缩放，而不影响其他盒子。

• • 2D转换综合写法
    1.transform:translate(x,y) rotate() scale();
    2.顺序很重要。

css动画

• animition设置多个节点精确控制一个或一组动画，不必鼠标移动上边。
• 分成两步：先定义动画，再调用动画
  1. 用keyframes定义动画

@keyframes 动画名称{
	0%{width:100px;}
	50%{width:200px;}/*对持续时间的划分*/
	100%{width:300px;}
}

        2.用animition调用（哪里动放哪里）

animition:名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;

animition:name 5s linear 2s infinite altermate;