css中关于定位的使用

最新推荐文章于 2022-06-30 17:03:22 发布

黎小兮～

最新推荐文章于 2022-06-30 17:03:22 发布

阅读量126

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_63608418/article/details/121522481

版权

本文深入探讨了CSS定位的原理和使用，包括static、relative、absolute和fixed四种定位方式，以及它们在文档流中的行为。重点介绍了如何利用定位实现元素在页面中的精确放置，如居中对齐的方法。此外，还提到了锚点的概念及其在页面内部跳转中的作用。对于开发者来说，理解并掌握这些定位技巧对于创建响应式和交互式的网页至关重要。

摘要由CSDN通过智能技术生成

定位的作用：改变元素的位置
    定位三要素：
        1.元素：修饰的对象
        2.参照物：当前对象移动位置的参照
        3.方向：top上、bottom下、left左、right右
定位属性：position
    属性值：
        static：静态定位默认值设置或者不设置效果不变
        relative 相对定位
            设置定位的时候一定要加方向值
            相对定位是相对于自身初始位置进行移动的
            相对定位不能脱离文档流
            作用：相对定位可以给绝对定位做参照物
        absolute 绝对定位
            绝对定位的参照物：
                当前的父级是否有定位属性，如果有就相对于父级进行移动；如果没有就会往上级查找，直至浏览器
            绝对定位会脱离文档流
        fixed 固定定位
            相对浏览器进行偏移
            固定定位会脱离文档流
            作用：多用来做广告弹窗、聊天窗口等
        sticky 粘性定位 css新增的属性值只高版本的浏览器支持
            粘性定位是相对定位和固定定位的结合，不会脱离文档流
已知元素宽高让元素在浏览器的中间显示：
        left和top为50% 再移动宽高的一半
        拓展: css3中属性 calc(计算公式)
未知元素宽高让元素在浏览器的中间显示：
        设置上下左右各值为0，然后设置margin为auto
锚点的概念:是一种超链接
    作用: 控制超链接在同一个页面中实现快速跳转
    写法
        第一个步骤跳转的位置设置 id属性和属性值
        第二个步骤设置超链接 <a href="#属性值">