css-定位position 理论

1.1网页常见布局方式

1.标准流

        1.块级元素独占一行直布局

         2.行内元素/行内块元素一行显示多个 ------>水平布局

2.浮动

          1. 可以让原本垂直布局的 块级元素变成水平布局

3.定位

        1. 可以让元素自由的摆放在网页的任意位置

        2. 一般用于 盒子之间的层叠情况

1.2使用定位的步骤

1.设置定位方式

属性名: position

        position 规定元素的定位方式(类型)

        static 默认值,没有定位(写和不写一样)

        fixed 固定定位,会让元素生成 固定定位的元素

固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的

        特点: 1、固定定位会使元素脱离文档流

                    2、元素在成为固定定位后,在没有规定固定宽度的情况下,宽高由内容撑开

                    3、固定定位会使元素产生块级框,不论任何类型的元素

                使用了固定定位后就都可以设置宽高了 固定定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置

left/right/top/bottom 指定定位元素具体定位的位置

        属性值:length(数值+单位) %

        (固定定位:根据浏览器显示窗口的宽[ left、right ]和高[ top、bottom ]计算的百分比值)

常见属性值:

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixoed

        设置偏移值 偏移值设置分为两个方向,水平和垂直方向各选一使用即可

        选取的原则一般是就近原则 《离哪边近用哪个)

方向属性名属性值含义
水平left数字+px距离左边的距离
水平right数字+px距离右边的距离
垂直top数字+px距离上边的距离
垂直bottom数字+px距离下边的距离
1.3相对定位

        介绍:自恋型定位,相对于自己之前的位置进行移动

        代码: position:relative;

特点:

        1.需要配合方位属性实现移动

        2.相对于自己原来位置进行移动

        3.在页面中占位置一没有脱标

应用场景:

        1.配合绝对定位组CP(子绝父相)

        2.用于小范围的移动

知识小结

        相对定位position的属性值是什么?relative

        相对定位是否需要配合方位属性实现移动?  需要配合方位属性实现移动

        相对定位的元素相对于谁进行移动?相对于自己原来位置进行移动

        相对定位的元素在网页中是否占位置? 在页面中占位置一没有脱标

1.4绝对定位

        介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动

        代码: position:absolute;

        特点:

                1.需要配合方位属性实现移动

                2.默认相对于浏览器可视区域进行移动

                3.在页面中不占位置一已经脱标

        应用场景:

                1.配合绝对定位组CP(子绝父相)     

        绝对定位: 先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位有父级,但父级没有定位,以浏览器窗口为参照为进行定位

        绝对定位元素是根据 离其(自身)最近并且有定位设置(static定位除外)的父元素 作为 定位位置的参考起点的
            最终绝对定位元素 根据谁 作为 定位位置的参考起点,就将谁叫做 绝对定位的元素的 包含块
         绝对定位元素 会查找 离其最近并且有定位设置的父元素 作为 包含块 使用
        但是如果 向上找到html标签,都没有父元素有定位设置,则中 将 html标签 视为 包含块
        一般情况如果希望 绝对定位元素 根据父元素定位偏移,就会给父元素 设置定位position:relative;
        特点:
            1、绝对定位会使元素脱离文档流
            2、元素在成为绝对定位后,在没有规定固定宽高的情况下,宽高由内容撑开
            3、绝对定位会使元素产生块级框,不论任何类型的元素使用了绝对定位后就都可以设置宽高了
        绝对定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置

绝对定位和相对定位的区别?

        绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位将元素从原来位置拿走,后面的元素就会占据绝对定位元素的位置。

        相对定位与绝对定位相反,它移动后原本所占的空间仍保留。可理解为它进行定位后,之前的位置后面的元素不可占据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模型预测笔记(三):通过交叉验证网格搜索机器学习的最优参数

文章目录 网络搜索介绍步骤参数代码实现 网络搜索 介绍 网格搜索(Grid Search)是一种超参数优化方法,用于选择最佳的模型超参数组合。在机器学习中,超参数是在训练模型之前设置的参数,无法通过模型学习得到。网格搜索…

gif怎么转换成mp4格式视频

gif怎么转换成mp4格式视频?GIF格式是一种广泛应用的公用图像文件格式标准,具有许多优势。它占用的内存较小,可以实现自动循环播放,并且兼容多个平台。然而,GIF格式也存在一些缺点。例如,它无法处理复杂的图…

laravel excel导入导出

一、安装第三方 composer require maatwebsite/excel版本2.1和现在版本 有所不一样 二、导入 <?php namespace App\Import; use Maatwebsite\Excel\Concerns\ToCollection;class TestImport implements ToCollection {public function __construct(){}public function c…

如何提高工业网关的数据传输速度?

工业网关是工业物联网系统中不可或缺的设备&#xff0c;提高工业网关的数据采集、传输速度&#xff0c;是保障和优化物联网系统运营效率的基础。如何提高工业物联网关的数据传输速度&#xff1f;本篇就为大家简单介绍一下。 1、选用高品质网络设备 选用具有足够带宽容量的高质…

vue的公共方法封装以及class高阶封装

一、Vue.use与Vue.prototype的区别和用法 1、Vue.use和Vue.prototype区别 相同点&#xff1a;都是注册插件的方式&#xff0c;没有本质区别&#xff0c;都是在vue.prototype上添加了一个方法不同点&#xff1a;vue.use适用于注册vue生态内的插件(vuex、router、elementUI)&…

MySQL提权

参考&#xff1a; mysql提权篇 | Wh0ales Blog MySQL 提权方法整理 - Geekbys Blog MySQL_UDF提权漏洞复现-云社区-华为云 MYSQL UDF手动提权及自动化工具使用_udf提权工具_小直789的博客-CSDN博客 MySQL提权的三种方法 - FreeBuf网络安全行业门户 ...

hive问题总结

往往用了很久的函数却只知道其单一的应用场景&#xff0c;本文将不断完善所遇到的好用的hive内置函数。 1.聚合函数或者求最大最小值函数搭配开窗函数使用可以实现滑动窗口 例&#xff1a; collect_list函数&#xff0c;搭配开窗函数&#xff0c;实现了在滑动窗口内对事件路径…

idea 常用插件和常用快捷键 - 记录

idea 常用插件 记得下载插件完成后&#xff0c;点击 Apply 和 OK Alibaba Java Coding Guidelines 作用&#xff1a;使用该插件可以&#xff0c;自动提示相关的语法格式问题&#xff0c;格式参考 阿里巴巴代码规范 详情链接&#xff1a; 代码规范之Alibaba Java Coding G…

js深拷贝三种方法

使用递归函数实现深拷贝 const obj {name: zzz,age: 18,hobby: [篮球, 足球],family: {baby: baby}} // 深拷贝 数组 对象 一定要先筛数组再筛对象,因为万物皆对象function deepcopy(newObj, oldObj) {for (const k in oldObj) {// 判断值是否属于array类if (oldObj[k] i…

深度学习怎么学?

推荐这本小白看的《深度学习&#xff1a;从基础到实践&#xff08;上下册&#xff09;》。 深度学习&#xff1a;从基础到实践&#xff08;上下册&#xff09; 深入浅出的讲述了深度学习的基本概念与理论知识&#xff0c;不涉及复杂的数学内容&#xff0c;零基础小白也能轻松掌…

在应用条上共享内容

动作提供者是一个动作&#xff0c;能定义自己的外观和行为&#xff0c;下面是为应用条增加一个动作提供者。 共享动作提供者允许用户与其他应用共享应用中的内容。可以使用动作提供者让用户向他们某个联系人发送一个特色披萨的详细信息。 共享动作提供者会定义自己的图标&#…

Scala中的类型检查和转换,以及泛型,scala泛型的协变和逆变

Scala中的类型检查和转换&#xff0c;以及泛型 类型检查和转换 说明 &#xff08;1&#xff09; obj.isInstanceOf[T]&#xff1a;判断 obj 是不是T 类型。 &#xff08;2&#xff09; obj.asInstanceOf[T]&#xff1a;将 obj 强转成 T 类型。 &#xff08;3&#xff09; cla…

2023-8-31 Dijkstra求最短路(二)

题目链接&#xff1a;Dijkstra求最短路 II #include <iostream> #include <cstring> #include <algorithm> #include <vector> #include <queue>using namespace std;typedef pair<int, int> PII;const int N 150010;int n, m; int h[N…

解决 PaddleClas 下载预训练模型报错 ModuleNotFoundError No module named ‘ppcls‘ 的问题

当我们在使用 PaddleClas 进行预训练模型下载时&#xff0c;可能会遇到一个报错&#xff0c;报错信息为 ModuleNotFoundError: No module named ppcls。这个错误通常是因为 Python 解释器无法找到名为 ppcls 的模块&#xff0c;而我们的代码中正尝试导入它。让我们一起来解决这…

HTTP 代理原理及 Python 简单实现

HTTP 代理是一种网络代理服务器(Proxy Server),它能够作为客户端与 HTTP 服务器之间的中介,它的工作原理是: 当客户端向 HTTP 代理发送 HTTP 请求时,HTTP 代理会收到请求。 HTTP 代理会将请求转发给目标 HTTP 服务器。 目标 HTTP 服务器处理请求并生成响应。 HTTP 代理将…

什么是操作系统,数据结构

1、什么是操作系统&#xff1f; 操作系统是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序。根据运行的环境&#xff0c;操作系统可以分为桌面操作系统&#xff0c;手机操作系统&#xff0c;服务器操作系统&#x…

QT Creator工具介绍及使用

一、QT的基本概念 QT主要用于图形化界面的开发&#xff0c; QT是基于C编写的一套界面相关的类库&#xff0c;如进程线程库&#xff0c;网络编程的库&#xff0c;数据库操作的库&#xff0c;文件操作的库等。 如何使用这个类库&#xff1a;类库实例化对象(构造函数) --> 学习…

数据结构(Java实现)-二叉树(上)

树型结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#xff0c;称为根结点&…

Docker搭建elasticsearch+kibana测试

最近需要做大数据画像&#xff0c;所以先简单搭建一个eskibana学习使用&#xff0c;记录一下搭建过程和遇到的问题以及解决办法 1.拉取es和kibana镜像 在拉取镜像之前先搜索一下 elasticsearch发现是存在elasticsearch镜像的&#xff0c;我一般习惯性拉取最新镜像&#xff0c…

信息化发展12

数字民生 数字民生建设重点通常强调&#xff1a; 1 &#xff09; 普惠&#xff1a; 充分开发利用信息技术体系&#xff0c; 扩大民生保障覆盖范围&#xff0c; 助力普惠型民生建设&#xff0c; 解决民生资源配置不均衡等问题。 2&#xff09; 赋能&#xff1a; 信息技术体系与…