【无标题】前端-第四次预习

浮动

浮动的特性

• 如果多个盒子都浮动，会并排并对齐顶部
• 浮动的盒子不在保留原先的位置
• 浮动的盒子会脱离标准流控制

浮动的使用

用float

<style>
    div {
        height: 200px;
        width: 200px;
        float: right;
        background-color: black;
    }
</style>

none	不浮动
left	左浮动
right	右浮动

浮动的消除

额外标签法

在浮动元素末尾加一个空标签

<div style="clear: both"></div>

父级元素添加overflow属性

overflow: hidden;超出部分不可见
overflow: auto;如果有超出部分显示滚动条
overflow: scroll;显示滚动条

父级元素添加after伪元素

.clearfix:: after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}

父级元素添加双伪元素

.clearfix:: before,
.clearfix:: after {
    content: "";
    display: table;
} 
.clearfix:: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

定位 position

定位的介绍

定位的定义

• 将盒子定在某一位置，按指定的方式移动盒子
• 格式：定位模式+边偏移
• 定位只能用在盒子身上

定位的类型

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移
top/right/left/bottom

静态定位

<style>
    div {
        position: static;
    }
</style>

没有偏移，相当于标准流

相对定位

<style>
    div {
        position: relative;
        top: 100px;
        left:100px;
    }
</style>

• 原来的位置仍保留
• 一般搭配相对定位使用
• 位置的移动是相当于原来自身的位置的移动

绝对定位

<style>
    div {
        position: absolute;
        top: 100px;
        left:100px;
    }
</style>

• 若没有祖先元素使用定位，边偏移就以浏览器为准
• 祖先元素有定位以最近一级为准
• 绝对定位不占原来的位置

固定定位

<style>
    div {
        position: fixed;
        top: 100px;
        left:100px;
    }
</style>

• 将元素固定到页面可视区域
• 以浏览器窗口为标准
• 不占有原先位置

粘性定位

<style>
    div {
        position: sticky;
        top: 100px;
        left:100px;
    }
</style>

• 以浏览器可视窗口为基准
• 占有原先的位置
• 必须添加边偏移元素
• 不常使用，兼容性差

定位的应用

定位的叠放顺序

z-index {
    z-index: 1;
}

• 属性相同，后来者居上
• 数字后不能加单位
• 只有定位的盒子才可以用
• 数值可正可负，默认为auto，数值越大，盒子越靠上

定位的特性

• 行内块元素添加绝对或固定定位，可直接设置高度和宽度
• 块级元素添加绝对或固定定位，默认是内容的高度和宽度
• 脱标的盒子不会触发外边距塌陷
• 绝对定位和固定定位会完全压住盒子

过渡transition

2D转换transform

实现元素的位移、旋转、缩放

移动

<style>
    div {
        height: 100px;
        width: 100px;
        transform: translate(700px,700px);
    }
</style>

transform: translate（x,y);在水平垂直方向上都移动
transform: translateX(n);在水平方向上移动
transform: translateY(n);在垂直方向上移动

• 移动不会影响其他元素的位置
• X,Y可以是百分比，百分比是相对自身大小
• 对行内标签没有效果

移动

<style>
    div {
        height: 100px;
        width: 100px;
        transform: rotate(25deg);
    }
</style>

• rotate里面跟度数，单位是deg
• 角度为正，顺时针，角度为负，逆时针
• 默认旋转中心是元素中心点，可改变
• 转换中心点transform-origin： x y;x、y之间用空格隔开，可以是方位名词

缩放

<style>
    div {
        height: 100px;
        width: 100px;
        transform: scale(x,y);
    }
</style>

• xy是倍数，没有单位
• 可以用transform-origin选择缩放中心

过渡transition

可以有四个值
第一个是过渡属性(color…)如果多个（all）没有（none）
第二个是过渡时间(1s)
第三个是过渡函数:

• ease(默认）
• linear(匀速）
• ease-in(慢速开始，加速效果)
• ease-out(慢速结束，慢速效果)
• ease-in-out（慢速开始结束，先加速后减速效果）

第四个是过渡延迟

<div id="test"></div>
    <style>
        #test{
            margin: 150px auto;
            width: 200px;
            height: 200px;
            background: red;
            transition: background-color 1s ease-in 1s;
        }
        #test:hover{
            background-color: yellow;
        }
    </style>

动画animation

使用

声明

@keyframes donghuaming {
    0%(from) {}
    100%(to) {}
}

调用

{
    animation-name: donghuaming;
}

属性

div {
    animation-name: donghuaming;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    animation-fill-mode: forwards;

}

animation-name	动画名称
animation-duration	规定动画完成一个周期需要的时间
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始
animation-iteration-count	规定动画播放的次数，默认是1
animation-direction	给i顶动画是否在下周期逆向播放，默认是normal，alternate逆播放
animation-play-state	规定动画是否正常运行或暂停，默认是running，还有pause
animation-fill-mode	规定动画借宿后状态，保持是forwards,回到起始是backwards