Css中的定位概念及各定位方法笔记分享

5 篇文章 0 订阅

补上一些学习笔记,内容不多也算是做一个总结(目前正在努力学习前端、查缺补漏)

本篇文章主要谈谈自己对于Css定位的理解

由于定位内容较多,本篇文章讲解概念,每个定位将拆分成单独一篇写

往期

子篇章


正文内容

定位的作用

个人理解为:有些布局例如浮动达不到的效果,定位可以很好地作为一个补充(常用于盒子的自由移动)

定位的方式

定位方式分为:静态定位(static)、绝对定位(absolute)、相对定位(relative)、固定定位(fixed)、粘性定位(sticky)

定位的偏移

定位偏移可以有(还有很多人称之为边偏移,这里是我个人理解为定位偏移):top(距离顶部多远)、bottom(距离底部多远)、left(距离左边多远)、right(距离右边多远),这些偏移都是基于定位的方式来决定的,定位方式的不同会影响偏移的方向不同

定位的实现

定位需要至少两行代码才能看得到效果:如position:relative;top:10px;

首先定位需要确定定位方式,再确定定位偏移;如果只有定位没有偏移是无法实现效果的,反之也同理;

代码例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的实现</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: royalblue;
            /* 定位为相对定位 */
            position: relative;
            /* 定位偏移为100px */
            left: 100px;
        }
    </style>
</head>

<body>
    <div>定位的实现</div>
</body>

</html>

运行结果(之所以四周有一点点小偏移是因为没有清除元素的内外边距,下同!):

定位的实现

静态定位(static)

静态定位是position:static;网页默认的定位方式,即无定位;这种在实际开发中算是很少用的,如果设置为static则定位偏移不起效果

例子代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态定位</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            /* 定位为静态定位 */
            position: static;
            /* 定位偏移不起效果 */
            left: 100px;
        }
    </style>
</head>

<body>
    <div>静态定位</div>
</body>

</html>

运行结果(之所以四周有一点点小偏移是因为没有清除元素的内外边距,下同!):

静态定位

总结(各定位之间的比较)

定位方式相对偏移位置是否脱离标准流
静态定位浏览器
相对定位自身原来的位置
绝对定位存在定位的祖先元素,若无则相对浏览器
固定定位浏览器
粘性定位浏览器

其他定位请阅读本文子篇章,开头附有链接!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值