【前端】课前预习第四次

一、浮动float

三种传统布局方式：标准流，浮动，定位

浮动是指多个块级元素横向排列时用的。

1、特点

a.浮动元素会脱离标准流。

• 会移动到指定位置（脱标）。
• 浮动的盒子不再保留原先的位置。

b.如果多个盒子都设置了浮动，则他们会按照属性值一行内显示且顶端对齐排列。（无空隙）

c.浮动的元素会具有行内块元素特性。
任何元素都可以浮动，不管原先什么模式，添加浮动后具有行内块元素相似的性质。

2、浮动布局注意点

a、浮动和标准流的父盒子搭配。
b、一个元素浮动了，理论上其他兄弟元素也要浮动。（只影响后面标准流，不影响前面）

3、清除浮动

有些父盒子，不方便给高度，子盒子浮动又不占用位置，最后父级盒子高度为0时，就影响下面标准流盒子。清除后，父级会根据浮动子盒子自动检测高度，有了高度，不会影响下面标准流。
clear：both/left/right
方法:

1. 额外标签法。
   

2. 父级添加overflow属性。
   

3. 父级加after伪元素。
   

4. 父级加双伪元素。
   

二、定位position

让盒子自由的在某个盒子内移动或固定屏幕中某个位置，并可以压住其他盒子。
定位=定位模式+边偏移

1、静态定位static

无定位，默认，标准流，无边偏移。

2、相对定位relative

a、相对于原来的位置移动。
b、不脱标，继续保留原来位置。

3、绝对定位absolute

是相对于父元素说的。
a、无祖先元素或祖先元素无定位，以浏览器为准。
b、祖先元素有定位（相对，绝对，固定），以最近一级有定位的父元素为准移动盒子。
c、绝对定位不再占有原来的位置。

子绝父相：子级绝对定位，父级相对定位。
a、儿子绝对定位在父盒子里，不影响兄弟。
b、父盒子加相对定位限制子盒子。

4、固定定位fixed

固定于浏览器可视的位置，在浏览器滚动时元素不动。
特点：
a、与父元素无关；
b、不占原先位置。

5、粘性定位sticky

a、以可视窗口为参照点；
b、占有原来位子；
c、必须加偏移至少一个。

6、叠放顺序

选择器 {
	z-index:1;
}

数可正可负，默认auto，数越大，盒子越往上，属性相同，后来者居上，数字不加单位，只有定位元素才可以。

7、绝对定位垂直居中

水平：left：50%；margin-left：-apx；（a为该盒子的一半）
垂直：top：50%；margin-top：-apx；

8、特殊属性

• 行内元素添加绝对或固定定位，可直接设置宽高。
• 块元素不给宽高，默认大小是盒子大小。
• 脱标元素不触发外边距塌陷。
• 浮动元素只会压住它下面标准流的盒子，但不会压住其中的文字，而绝对定位会完全压住下面标准流下的所有内容。

9、元素的显示与隐藏

• a、display：none；是隐藏元素，block还可以显示元素。（不再占有原来的位置）

• 
  

• b、visibility：visible；元素可视，hidden是隐藏元素。（继续占有原位置）

• 

• c、overflow：溢出，指若内容溢出会发生什么，但定位盒子慎用。
  visible显示超出部分；hidden多出部分隐藏；scroll显示滚动条；auto仅在超出时显示滚动条。

三、过渡transition

transition：属性 花费时间 运动曲线 何时开始；
属性和花费时间不可省略，经常和hover一起用。
运动曲线有ease,linear,ease-in,ease-out,ease-in-out等。

四、动画animation

先定义动画，再使用动画。

 @keyframes jf {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }

 animation-name: jf;
 animation-duration: 1s;

简写：animation: name duration timing-function delay iteration-count direction fill-mode;
动画名称，持续时间，运动曲线，何时开始，播放次数（infinite无限），是否反方向，动画始末状态。

还有animation-play-style:running/pause;也常用。