概述
脱离文档流方法：浮动，绝对定位，固定定位
一、浮动（只有左右浮动）
1.作用：可以让多个元素由垂直变成水平摆放，让图片没有空格
2.缺点：影响后面的元素，对父级元素造成高度塌陷
3.清除浮动：给父元素添加高度
受影响的元素添加clear元素（clear：left/right/both左右都可以）
父级元素增加overflow: hidden; clear: both;
伪对象方式： .container::after{
content: " ";
display: block;
clear: both;
}
4.浮动：
<style>
.box{
width: 200px;
height: 200px;
background-color: rgb(126, 168, 247);
float: left;（向左浮动，右right）
}
.container{
width: 400px;
height: 400px;
background-color: rgb(162, 75, 244);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
二、定位
绝对定位
3层定位（1个标准流，2个绝对定位）
.box1{
width: 300px;
height: 300px;
background-color: chartreuse;
position: absolute;
left: 100px;
top: 100px;
}
.box2{
width: 200px;
height: 200px;
background-color: darkblue;
}
.box3{
width: 200px;
height: 200px;
background-color: rgb(139, 79, 0);
position: absolute;
}
固定定位
.box1{
width: 200px;
height: 200px;
background-color: darksalmon;
position: fixed;
right: 100px;
bottom: 100px;
}
相对定位
div{
width: 300px;
height: 300px;
background-color: blueviolet;
position: relative;
left: 100px;
top: 100px;
}
注：如果box想相对于父级进行定位，父级container里面加定位，如果box想相对于文档进行定位，父级container不需要加定位，如下：
.container{
width: 300px;
height: 300px;
background-color: #666;
position: relative;
left: 200px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
}
注：box1 , z-index:100; box2 , z-index:50;
三、css特性
圆角（一/二/三/四 个值）
div{
width: 56px;
height: 56px;
background-color: hotpink;
border-radius: 20px;
}
阴影
box{
width: 300px;
height: 300px;
background-color: fuchsia;
/* auto左右均匀分配 */
margin: 0 auto;
box-shadow:20px 10px 20px rgb(230, 24, 24) ;（水平方向 垂直方向 模糊度）
}
四、动画
animation执行动画；
animation: name duration timing-function delay iteration-count direction;
name | 动画名称 |
duration | 动画的持续时间 |
timing-function | 动画效果的速率 |
delay | 动画的开始时间（延时执行） |
iteration-count | 动画循环的次数，infinite为无限次数的循环 |
direction | 动画播放的方向 |
animation-play-state | 控制动画的播放状态：running代表播放，而paused代表停止播放 |
timing-function值 | 描述 |
ease | 逐渐变慢（默认） |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速后减速 |
direction值 | 描述 |
normal | 默认值为normal表示向前播放 |
alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
<style>
div{
width: 200px;
height: 200px;
background-color: darkolivegreen;
animation: dh 5s linear 0s infinite;
}
div:hover{
animation-play-state: paused;
}
使用@keyframes规则，创建动画，0% 是动画的开始，100% 是动画的完成；dh动画名称
@keyframes dh{
0%{
width: 100px;
background-color: rgb(254, 168, 168);
}
50%{
width: 300px;
background-color: aqua ;
}
100%{
width: 400px;
background-color: rgb(162, 248, 199);
}
}
</style>
最后
以上就是苹果飞机为你收集整理的HTML，CSS 脱离文档流的全部内容，希望文章能够帮你解决HTML，CSS 脱离文档流所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复