码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • html中的定位知识点如何使用

    目录

    系列文章目录

    文章目录

    前言

    一、定位是什么？有什么用？

    二、定位方式有哪些？怎么使用？

            1、静态定位：就是默认的定位方式，意思就是没有定位;                

            2、相对定位：

            3、绝对定位：

            4、固定定位：固定定位永远参照于浏览器的视口进行定位

    三、相对定位解析：

           1、 这里我们先用标准流写一个小demo：

            2、得到一个效果图 ，是一个大盒子里面嵌了2个小盒子的效果：

    3、这个时候我要开始给盒子2号加相对定位，然后让其进行一个偏移

     4、结论：

    四、绝对定位解析

            1、同样的，这里我们先准备一个小demo，然后在此基础上进行操作：

            2、demo效果如下，其实就比上面多一个盒子：

             3、将盒子2号设置为绝对定位

            4、得到效果如下：

            5、我只是给2号盒子设置了一个定位，并没有将3号盒子隐藏，3号盒子却不见了，这是为什么？

            6、刚刚我们将占有这个特点得出来了，那么偏移的参考点在哪里呢？我们来看看：

            7、效果如下：

     8、总结：

    五、子绝父相的应用

            这个是基于上面的绝对定位和相对定位以及项目实战得出的一个应用点，就是给元素自身设置为绝对定位后，一般都给父级元素设置为相对定位，也就是子绝父相；

    总结

    前言

            相信很多同学在学习html的时候，都不太能明白定位的用法，其中主要的相对定位和绝对定位更是很懵b，今天小魏就给大家分析分析这个相对定位和绝对定位的用法，相信看了这篇博客肯定有所收获！

    一、定位是什么？有什么用？

            在html中有三种流：标准流、浮动流、定位流，定位就是第三种，平时我们写的

    默认就是标准流，浮动流当然了，就是浮动；

            定位的作用是为了解决元素之间的层级关系；

    二、定位方式有哪些？怎么使用？

            1、静态定位：就是默认的定位方式，意思就是没有定位;                

    position: static;//静态定位

            2、相对定位：

    position: relative;//相对定位

            3、绝对定位：

    position: absolute;//绝对定位

            4、固定定位：固定定位永远参照于浏览器的视口进行定位

    position: fixed;//固定定位

            在这里给大家介绍了2种的用法，静态定位和固定定位不用多说，大家能够轻易理解，这个也不是小魏做解释的重点，重点是相对定位和绝对定位，接下来用案例给大家进行分析，然后得出总结：

    三、相对定位解析：

           1、 这里我们先写一个小demo：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         /* 大盒子的样式 */
    11.         .a1 {
    12.             width: 400px;
    13.             height: 400px;
    14.             background-color: pink;
    15.             position: relative;
    16.             margin: 10px 10px;
    17.         }
    18.         /* 盒子1号的样式 */
    19.         .a2 {
    20.             width: 100px;
    21.             height: 100px;
    22.             background-color: aquamarine;
    23.         }
    24.         /* 盒子2号的样式 */
    25.         .a3 {
    26.             width: 100px;
    27.             height: 100px;
    28.             background-color: aqua;
    29.         }
    30.     style>
    31.  
    32. head>
    33.  
    34. <body>
    35.     <div class="a1">
    36.         <div class="a2">盒子1号div>
    37.         <div class="a3">盒子2号div>
    38.     div>
    39. body>
    40.  
    41. html>

            2、得到一个效果图 ，是一个大盒子里面嵌了2个小盒子的效果：

    3、这个时候我要开始给盒子2号加相对定位，然后让其进行一个偏移

            ①在盒子2号里面加上相对定位的代码

    1. /* 盒子2号的样式 */
    2.         .a3 {
    3.             width: 100px;
    4.             height: 100px;
    5.             background-color: aqua;
    6.             position: relative;
    7.         }

            ②截图浏览器并没有发生变化

             ③这个时候我设置一下盒子2号的一些偏移量

    1.         /* 盒子2号的样式 */
    2.         .a3 {
    3.             width: 100px;
    4.             height: 100px;
    5.             background-color: aqua;
    6.             position: relative;
    7.             left: 20px;
    8.             top: 10px;
    9.         }

            ④截图看效果

            ⑤这个时候就会发现盒子2号进行了一定的偏移，我们就可以得到一个疑问：原点在哪里？坐标轴中心在哪儿，所以我们可以得出相对定位的结论； 

     4、结论：

            ①给元素设置了相对定位后，元素如果不设置left、top这些属性值，依旧还保持在原本的位置，也就是拥有占位的效果；

            ②位置偏移的参考点是原来盒子所在位置的左上角的点

    四、绝对定位解析

            1、同样的，这里我们先准备一个小demo，然后在此基础上进行操作：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         /* 大盒子的样式 */
    11.         .a1 {
    12.             width: 400px;
    13.             height: 400px;
    14.             background-color: pink;
    15.             position: relative;
    16.             margin: 10px 10px;
    17.         }
    18.         /* 盒子1号的样式 */
    19.         .a2 {
    20.             width: 100px;
    21.             height: 100px;
    22.             background-color: aquamarine;
    23.         }
    24.         /* 盒子2号的样式 */
    25.         .a3 {
    26.             width: 100px;
    27.             height: 100px;
    28.             background-color: aqua;
    29.         }
    30.         .a4 {
    31.             width: 100px;
    32.             height: 100px;
    33.             background-color:antiquewhite;
    34.         }
    35.     style>
    36.  
    37. head>
    38.  
    39. <body>
    40.     <div class="a1">
    41.         <div class="a2">盒子1号div>
    42.         <div class="a3">盒子2号div>
    43.         <div class="a4">盒子3号div>
    44.     div>
    45. body>
    46.  
    47. html>

            2、demo效果如下，其实就比上面多一个盒子：

             3、将盒子2号设置为绝对定位

    1.  /* 盒子2号的样式 */
    2.         .a3 {
    3.             width: 100px;
    4.             height: 100px;
    5.             background-color: aqua;
    6.             position: absolute; /*设置为绝对定位*/
    7.         }

            4、得到效果如下：

            5、我只是给2号盒子设置了一个定位，并没有将3号盒子隐藏，3号盒子却不见了，这是为什么？

            这个就和开始说定位是为了解决元素间的层级关系进行了一个解释；2号盒子在3号盒子之上，然后2号盒子的原本位置不会被保留，3号盒子就将其进行了占有；

            6、刚刚我们将占有这个特点得出来了，那么偏移的参考点在哪里呢？我们来看看：

    我给盒子2号加上偏移的像素

    1.         /* 盒子2号的样式 */
    2.         .a3 {
    3.             width: 100px;
    4.             height: 100px;
    5.             background-color: aqua;
    6.             position: absolute; /*设置为绝对定位*/
    7.             top: 20px;
    8.             left: 20px;

            7、效果如下：

    我们会发现，这个时候的基础点是浏览器的左上角

     8、总结：

            ①给元素设置了绝对定位后，该元素已经不在原位置，并且该位置被其他元素进行占有

            ②位置偏移的参考点如果父级没有设置定位的话，参考点是浏览器的左上角

    五、子绝父相的应用

            这个是基于上面的绝对定位和相对定位以及项目实战得出的一个应用点，就是给元素自身设置为绝对定位后，一般都给父级元素设置为相对定位，也就是子绝父相；

            举个例子，刚刚在第四点里面我用了绝对定位，我不想他的参考点是浏览器左上角，而是最外层的这个大盒子，那么我就去给大盒子添加一个相对定位，整个代码如下：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         /* 大盒子的样式 */
    11.         .a1 {
    12.             width: 400px;
    13.             height: 400px;
    14.             background-color: pink;
    15.             position: relative;
    16.             margin: 10px 10px;
    17.             position: relative;
    18.         }
    19.         /* 盒子1号的样式 */
    20.         .a2 {
    21.             width: 100px;
    22.             height: 100px;
    23.             background-color: aquamarine;
    24.         }
    25.         /* 盒子2号的样式 */
    26.         .a3 {
    27.             width: 100px;
    28.             height: 100px;
    29.             background-color: aqua;
    30.             position: absolute; /*设置为绝对定位*/
    31.             top: 20px;
    32.             left: 20px;
    33.         }
    34.         .a4 {
    35.             width: 100px;
    36.             height: 100px;
    37.             background-color:antiquewhite;
    38.         }
    39.     style>
    40.  
    41. head>
    42.  
    43. <body>
    44.     <div class="a1">
    45.         <div class="a2">盒子1号div>
    46.         <div class="a3">盒子2号div>
    47.         <div class="a4">盒子3号div>
    48.     div>
    49. body>
    50.  
    51. html>

    效果如下，这样参考点就变成了大盒子的左上角，一般在项目中就是这样使用的，既然小盒子在大盒子之中，就要参考点设置为大盒子，这样更好操作：

     

    六、总结

            相对定位relative：

                    Ⅰ、占位【原来所在的位置依旧在】

                    Ⅱ、位置偏移的参考点：是原来盒子所在位置的左上角的点

            绝对定位absolute：

                    Ⅰ、不占位【不在原来的位置了，后面的会盒子会占这个加了绝对定位的盒子的位置】

                    Ⅱ、位置偏移的参考点：是根据父亲盒子来的，没有父盒子就在浏览器左上角

    相信看到这儿的小伙伴肯定都懂啦，不妨留下三连啦

  • 相关阅读:
    Java多并发（六）| 线程池的基本概述
    鸿蒙手表开发之使用adb命令安装线上包
    uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片 + 头像图片原地覆盖上传示例
    学习分享：对极几何、基本矩阵、本质矩阵（持续更新）
    Oracle优化神技之临时表
    荣誉榜再度添彩！热烈祝贺旭帆科技荣获安徽省大数据企业！
    java计算机毕业设计火车订票管理系统源码+mysql数据库+系统+lw文档+部署
    （五）CSS前端开发面试会问到的问题有哪些？
    SQL底层执行原理
    速卖通，国际站测评补单用什么环境，买家账号不会被风控，F号
  • 原文地址：https://blog.csdn.net/qq_52545155/article/details/128000533
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常，环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
    奉劝各位学弟学妹们，该打造你的技术影响力了！
    五年了，我在 CSDN 的两个一百万。
    Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
    面试官都震惊，你这网络基础可以啊！
    你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候，用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图，Python爬虫120例，再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号