css-页面布局-定位大解析-每文一言(世界上,没有人可以支持你一辈子)

🎐每文一言

世界上,没有人可以支持你一辈子

目录

🎐每文一言

🎁css定位

🧧静态定位 position: static

🎄相对定位 position:relative

🎀绝对定位 position:absolute

🎃固定定位 position:fixed

🛒上吧,我的三神剑(相对定位 绝对定位 固定定位)

🎵案例1: 子元素1 向下移动50px 相右移动50px

🎵案例2:  定位1个子元素在父级的右下角 

🎵案例 3 固定在网页右侧中间


 

🎁css定位

position:static

静态定位 处于文档流 不能随意更改自己的定位
position:relative相对定位 不会脱离文档流 保留原有的位置 可以支撑父元素
position:absolute绝对定位 脱离文档流 释放布局空间
position:fixed固定定位 脱离文档流  浏览器窗口为参照物

🧧静态定位 position: static

特点: 元素处于文档流中 依次排列 

层级 z-index :使用定位后,元素发生重叠可以调整层级 

  1. z-index的值 越大 层级越高 按照值的大小依次划分层级
  2. 值为整数值 无单位
  3. 默认值是auto 可以视为层级0 其还可以取负值

🎄相对定位 position:relative

特点: 元素处于文档流中 可以保留原有位置 可以支撑父元素

移动参照物 : 元素自己原来的位置

对比 margin 的区别 : margin 会影响其他元素 而 相对定位不会

运用场景 :微调元素位置

🎀绝对定位 position:absolute

特点: 元素离开文档流 释放页面布局

移动参照物 : 离自己最近使用的定位属性的上级元素,由进即远 终点事html根元素

运用场景 :需要根据父元素定位 且不影响其他元素 

记忆:"子绝父相" 绝对定位实现需要父级元素相对定位(或者固定定位)来确定位置

🎃固定定位 position:fixed

特点: 元素离开文档流 释放页面布局

移动参照物 : 是html页面为基础

运用场景 :需要固定在html某个位置

🛒上吧,我的三神剑(相对定位 绝对定位 固定定位)

图示讲解 原始位置

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
//css样式(主要讲解)<style>.father{width:400px;height: 200px;background-color: #e8e8e8;}.son{width: 50px;height: 50px;background-color: #0aa1ed;}</style>
</head>
<body>
//html部分(不会变,后面不会再写)
<div class="father"><div class="son"></div>
</div></body>
</html>
🎵案例1: 子元素1 向下移动50px 相右移动50px

原图

亿图图示icon-default.png?t=N7T8https://www.edrawmax.cn/online/share.html?code=dca0930209c511ef84030bfa047a2703 代码

<style>.father{width:400px;height: 200px;background-color: #e8e8e8;
//父元素定位position: relative;}.son{width: 50px;height: 50px;background-color: #0aa1ed;
//子元素相对定位position: relative;left: 50px;top:50px;}</style>

 

🎵案例2:  定位1个子元素在父级的右下角 

原图

亿图图示icon-default.png?t=N7T8https://www.edrawmax.cn/online/share.html?code=4173096c07ce11ef9109ebf0f0121b46 代码

<style>.father{width:400px;height: 200px;background-color: #e8e8e8;
//父元素相对定位position: relative;}.son{width: 50px;height: 50px;background-color: #0aa1ed;
//子元素绝对定位position: absolute;right: 0;bottom: 0;}</style>

 

🎵案例 3 固定在网页右侧中间

原图

亿图图示icon-default.png?t=N7T8https://www.edrawmax.cn/online/share.html?code=9519dcac049b11efb3bfc7ec0d041a21

 代码

 <style>
//注意浏览器自带外边距和内边距*{padding: 0;margin: 0;}.father{width:400px;height: 200px;background-color: #e8e8e8;position: relative;}.son{width: 50px;height: 50px;background-color: #0aa1ed;
//固定定位position: fixed;right: 0;top:50%;}</style>

下一篇内容预告✨✨✨✨:网页布局学习-框架(过渡)

文章后记

最近在搭建公众号-浅羽陪你敲代码_主要分享一下相关有关java代码知识点

感兴趣的朋友可以关注一下😍😍,日常喜欢做一些知识总结,也是为日后寻找合适的工作做准备💪,

如果有志同道合的朋友,希望能留个言,一起进步-一起奋斗(~ ̄▽ ̄)~

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

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

相关文章

Yoast SEO Premium插件下载,提升您的网站SEO排名

在当今数字化时代&#xff0c;网站的搜索引擎优化&#xff08;SEO&#xff09;至关重要。它不仅影响着网站的可见度&#xff0c;更直接关系到您的在线业务成功与否。如果您正在寻找一个能够显著提升网站SEO表现的工具&#xff0c;Yoast SEO Premium插件将是您的理想选择。 为什…

赶紧收藏!2024 年最常见 100道 Java 基础面试题(四十一)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 100道 Java 基础面试题&#xff08;四十&#xff09;-CSDN博客 八十一、tcp为什么要三次握手&#xff0c;两次不行吗&#xff1f;为什么&#xff1f; TCP&#xff08;传输控制协议&#xff09;使用三次握手&#xf…

【Linux网络】Shell脚本语句

目录 一、条件语句 1.1 测试 1.2 比较整数数值 1.3 字符串比较 1.4 双中括号 1.5 ()与{} 1.6 if语句 1.7 case语句 1.8 echo命令 二、循环语句 2.1 for循环 2.2 while循环 2.3 until循环 一、条件语句 1.1 测试 格式一&#xff1a;test 条件表达式 格式二&#x…

AI技术如何提升内容生产的效率和质量

随着人工智能&#xff08;AI&#xff09;技术的不断发展和应用&#xff0c;内容生产领域也迎来了巨大的变革。AI技术在提升内容生产效率和质量方面发挥着越来越重要的作用&#xff0c;从自然语言处理到生成模型&#xff0c;AI为内容创作者和生产者带来了许多新的机会和挑战。本…

(docker)进入容器后如何使用本机gpu

首次创建容器&#xff0c;不能直接使用本机gpu 在系统终端进行如下配置&#xff1a; 1.安装NVIDIA Container Toolkit 进入Nvidia官网Installing the NVIDIA Container Toolkit — NVIDIA Container Toolkit 1.15.0 documentation&#xff0c;安装NVIDIA Container Toolkit …

AI预测福彩3D采取887定位策略+杀断组+杀和尾+杀和值012缩水测试5月12日预测第1弹

前段时间工作太忙&#xff0c;手头上各种事情较多&#xff0c;没有静下心来对我的AI模型预测结果进行进一步分析筛选&#xff0c;导致最近连续几期与实际开奖结果相差较大。当然&#xff0c;客观来说&#xff0c;搞6码定位的确难度比较大&#xff0c;昨天跟几个常年研究3D的彩友…

OpenCV 光流法总结

0.概述 1.原理说明 2.代码实现 #include <iostream> #include <opencv2/opencv.hpp>int main(int argc, char** argv) {if(argc ! 2) {std::cerr << "Usage: " << argv[0] << " <video_path>" << std::endl;…

从零学算法2391

2391. 收集垃圾的最少总时间 给你一个下标从 0 开始的字符串数组 garbage &#xff0c;其中 garbage[i] 表示第 i 个房子的垃圾集合。garbage[i] 只包含字符 ‘M’ &#xff0c;‘P’ 和 ‘G’ &#xff0c;但可能包含多个相同字符&#xff0c;每个字符分别表示一单位的金属、纸…

商业时代杂志社投稿信箱邮箱

商业时代杂志投稿信箱邮箱 商业时代杂志 《商业时代》、投稿信箱&#xff1a;sysdbjb126.com 《商业时代》、投稿信箱&#xff1a;sysdbjb126.com 《商业时代》、投稿信箱&#xff1a;sysdbjb126.com 《商业时代》、投稿信箱&#xff1a;sysdbjb126.com 咨询电话&#xf…

【RAG 论文】FiD:一种将 retrieved docs 合并输入给 LM 的方法

论文&#xff1a; Leveraging Passage Retrieval with Generative Models for Open Domain Question Answering ⭐⭐⭐⭐ EACL 2021, Facebook AI Research 论文速读 在 RAG 中&#xff0c;如何将检索出的 passages 做聚合并输入到生成模型是一个问题&#xff0c;本文提出了一…

java基础知识点总结2024版(8万字超详细整理)

java基础知识点总结2024版&#xff08;超详细整理&#xff09; 这里写目录标题 java基础知识点总结2024版&#xff08;超详细整理&#xff09;java语言的特点1.简单性2.面向对象3.分布式4.健壮性5.安全性6.体系结构中立7.可移植性8.解释性9.多线程10.动态性 初识java中的main方…

Web前端开发之JavaScript_2

条件语句三元运算符循环语句字符串数组 1. 条件语句 1.1 if语句 if (布尔值){ // “布尔值”往往由一个表达式产生&#xff0c;其中&#xff0c;赋值表达式不具备比较作用 语句; } 1.2 if...else 语句 if...else可成对单独使用&#xff0c;也可多层if...else …

十二届蓝桥杯Python组3月中/高级试题 第三题

** 十二届蓝桥杯Python组3月中/高级试题 第三题 ** 第三题&#xff08;难度系数 3&#xff0c;25 个计分点&#xff09; 提示信息&#xff1a; 心理学用“智力商数”即“IQ”来表示一个人的智力水平。经过研究划分&#xff0c;智力水平可分为7 个等级&#xff1a; 1、IQ≥140…

Java类与对象(一)

类的定义与使用 在Java中使用关键字class定义一个类&#xff0c;格式如下&#xff1a; class 类名{// 成员变量/字段/属性//成员方法/行为 }Java中类和c语言中的结构体有点类似&#xff0c; 在Java中类名一般采用大驼峰&#xff08;每个首字母大写&#xff09;的形式&#xf…

类和对象一(从封装开始讲述)

目录&#xff1a; 一.封装 二.封装扩展之包&#xff0c;自定义包 三.访问限定符 四.static成员 一.封装&#xff1a;封装&#xff1a;将数据和操作数据的方法进行有机结合&#xff0c;隐藏对象的属性和实现细节&#xff0c;仅对外公开接口来和对象进行 交互。面向对象…

Python | 为列表中的元素分配唯一值

我们可以给列表中的所有数字分配一个唯一的值&#xff0c;重复时它会保留给它的值。这是一个非常常见的问题&#xff0c;在Web开发中&#xff0c;处理物品id时会遇到。让我们讨论一下解决这个问题的一些方法。 1. 使用enumerate() 列表解析 # initializing list test_list …

Reactor Netty TCP 服务器端-响应式编程-011

🤗 ApiHug {Postman|Swagger|Api...} = 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱,有温度,有质量,有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace The Next Generation API Development Platform…

Pytorch图像分类模型模型实时在线验证代码

1.训练并保存自己的模型 保存的模型格式为&#xff1a;XXX.pth torch.save(model, "./weight/last.pth")if best_acc <(validation_acc / len_val):torch.save(model, "./weight/best.pth")2.转化为ONNX格式 2.1环境安装&#xff08;window10&#x…

一款简约大气的个人单页介绍主页(附加源码)

一款简约大气的个人单页介绍主页&#xff08;附加源码&#xff09; 效果图部分源码领取源码下期更新预报 效果图 部分源码 .box_bg{width: 100%;height: 100%; }.wenzi{text-align: center;float: left;display: inline;width: 112px;line-height: 48px; } .wenzi2{text-align…

Hikyuu高性能量化研究框架助力探索

Hikyuu Quant Framework 是一款基于C/Python的开源量化交易分析与研究工具&#xff0c;主要用于A股市场的交易策略分析与回测&#xff0c;目前不支持期货等&#xff0c;需要自行改造。 Hikyuu的目标 Hikyuu的最初目的是为了快速对A股全市场股票进行策略回测和验证&#xff0c…