HTML，CSS 脱离文档流

最新推荐文章于 2024-08-05 18:36:07 发布

MY诗界

最新推荐文章于 2024-08-05 18:36:07 发布

阅读量861

点赞数

分类专栏： HTML 文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_55226759/article/details/128666745

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

脱离文档流方法：浮动，绝对定位，固定定位

一、浮动（只有左右浮动）

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>

</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代表停止播放