相对定位、绝对定位

最新推荐文章于 2021-10-12 15:27:01 发布

一蓑烟雨..

最新推荐文章于 2021-10-12 15:27:01 发布

阅读量161

点赞数

分类专栏： html\css 文章标签： html

本文链接：https://blog.csdn.net/weixin_44713688/article/details/107344978

版权

html\css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

html（9）css定位

在这里插入图片描述

相对定位：
position：relative,相对于原先的位置

{
position:relative;
top:50px
}

{
margin-top:50px
}

第一段代码表示这个块移动了50，但是占位还是200x200;第二段代码表示这个块的占位就变成了200x250

绝对定位：

position：absolute，脱离了标准流浮起来了，这个时候下面的div会顶上来

默认的时候，绝对与整个浏览器的页面；当父类不是默认的时候，绝对于body的部分；有父类时，绝对于父类的定位
固定定位：

position：fixed(效果和background-attachment：fixed是一样的，当页面滚动时这一块是不动的)

固定定位也是脱离标准流浮起来的，定位基于浏览器
浮动和inline-block:

1.浮动：
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。

2.inline-block(像柱状图):
inline-block是指行内块元素，它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。

3.两者的区别：
- float:上面对齐；可以从左到右也可以从右到左（float：left ； float：right；）。
- inline-block: display:inline-block下面对齐；只能从左到右。
清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* display: inline-block; */
            float: left;
        
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:plum;
            /* display: inline-block; */
            float: left;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color:rebeccapurple;
            /* display: inline-block; */
            float: left;
            
        }
        .clear{

            clear: both;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color:blueviolet;
            /* display: inline-block; */
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
    <div class="box4"></div>
</body>
</html>

一蓑烟雨..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对定位、绝对定位

html（9）css定位相对定位：position：relative,相对于原先的位置{position:relative;top:50px}{margin-top:50px}第一段代码表示这个块移动了50，但是占位还是200x200;第二段代码表示这个块的占位就变成了200x250绝对定位：position：absolute，脱离了标准流浮起来了，这个时候下面的div会顶上来默认的时候，绝对与整个浏览器的页面；当父类不是默认的时候，绝对于body的部分；有父类时，
复制链接

扫一扫