3.6 CSS定位

    CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点,然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同,越往右数字越大;y轴与数学坐标系方向相反,越往下数字越大。本节主要介绍4种定位的方式:绝对定位、相对定位、层叠效果和浮动。联合使用这些定位方式,可以创建更为复杂和准确的布局。

3.6.1 绝对定位

    绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间。

    使用绝对定位需要将HTML元素的position属性值设置为absolute(绝对的),并使用4种关于方位的属性关键词left(左边)、right(右边)、top(顶部)、bottom(底端)中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。

例如,需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置:

p{
position: absolute;
top:100px;
left:100px
}

需要注意的是,绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值,则相对于整个网页。

3.6.2 相对定位

    使用相对定位需要将HTML元素的position属性值设置为relative(绝对的),与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置,也仍然从原始的起点处占据空间。

    使用相对定位需要将HTML元素的position属性值设置为relative(相对的),并同样使用4种关于方位的属性关键词left(左边)、right(右边)、top(顶部)、bottom(底端)中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。

例如,需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置:

p{
position: relative;
top:150px;
left:100px
}

 

3.6.3 层叠效果

    在CSS中,除了定义HTML元素在水平和垂直方向上的位置,还可以定义多个元素在一起叠放的层次。使用属性z-index可以为元素规定层次顺序,其属性值为整数,并且该数值越大将叠放在越靠上的位置。例如,z-index属性值为99的元素一定显示在z-index属性值为10的元素上面。

3.6.4 浮动

1. 浮动效果float

    在CSSfloat属性可以用于令元素向左或向右浮动。以往常用于文字环绕图像效果,实际上任何元素都可以应用浮动效果。该属性有4种属性值,如表所示。

     在对元素声明浮动效果后,该浮动元素会自动生成一个块级框,因此需要明确指定浮动元素的宽度,否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。

    如果一行之内的宽度不足以放置浮动元素,则该元素会向下移动直到有足够的空间为止再向着指定的方向进行浮动。

 

2. 清理浮动clear

    CSS中的clear属性可以用于清理浮动效果,它可以规定元素的哪一侧不允许出现浮动元素。该属性有5种属性值,如表所示。

例如,常用clear:both来清除之前元素的浮动效果。 

p{
    clear:both;
}

此时该元素不会随着之前的元素进行错误的浮动。 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

r3live使用realsense避免相机内参标定

话题 /camera/color/camera_info 消息格式 sensor_msgs/CameraInfo distortion_model&#xff1a;指定了相机畸变模型&#xff0c;"plumb_bob"简单的径向和切向畸变模型 D&#xff1a;畸变参数&#xff0c;取决于畸变模型&#xff0c;(k1, k2, t1, t2, k3)&#xf…

Shell编程初识

Shell初识 ShellShell 脚本Shell 环境第一个shell脚本实例 运行 Shell 脚本方法&#xff1a;1、作为可执行程序2、作为解释器参数3.使用 . (空格)脚本名称来执行4.使用 source 来执行(主要用于生效配置文件)区别1.关于执行权限2.关于是否开启子shell线程 脚本排错及问题判断she…

dm8 备份与恢复

dm8 备份与恢复 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…

Linux学习之路 -- 进程篇 -- PCB介绍2 -- 标识符和进程创建

前面我们介绍了的进程的标识符&#xff0c;下面继续介绍进程标识符和进程创建的知识。 目录 一、进程创建 <1>fork函数的返回值 <2>创建子进程的目的 <3>代码共享 二、fork函数的相关问题 <1>为什么给父进程返回子进程的pid&#xff0c;给子进程…

数据生成 | Matlab实现基于DE差分进化算法的数据生成

数据生成 | Matlab实现基于DE差分进化算法的数据生成 目录 数据生成 | Matlab实现基于DE差分进化算法的数据生成生成效果基本描述模型描述程序设计参考资料 生成效果 基本描述 1.Matlab实现基于DE差分进化算法的数据生成&#xff0c;运行环境Matlab2021b及以上&#xff1b; 2.计…

代码随想录算法训练营Day46|LC139 单词拆分

一句话总结&#xff1a;完全背包&#xff01; 原题链接&#xff1a;139 单词拆分 动态规划之完全背包五部曲&#xff1a; 确定dp数组与下标含义&#xff1a;表示字符串长度为i时&#xff0c;dp[i] true 的话&#xff0c;可以拆分为一个或多个在字典中出现的单词。确定递归公…

C++相关概念和易错语法(4)(构造函数、析构函数)

一、构造函数 1.实现的功能&#xff1a;实例化对象的时候默认自动调用&#xff0c;相当于初始化。 条件&#xff1a;在书写时要满足构造函数的规范&#xff08;函数名 类名&#xff0c;不写返回值&#xff0c;也没有返回值&#xff09;&#xff0c;可以用inline来修饰。 2.自…

Microsoft Edge浏览器设置之后就很牛逼了

1.移除多余的广告 首先我们要先下载Microsoft Edge浏览器浏览器 然后在设置中先打开扩展,安装一个神奇的去广告插件 打开Edge 加载项 直接搜adguard 广告拦截器,直接获取就可以安装了,由于我已经安装过了,所以就是显示的删除。 2.解除网页复制限制 直接在扩展中安装sim…

Toyota Programming Contest 2024#4(AtCoder Beginner Contest 348)(A~D)

A - Penalty Kick i,1~N。如果 i 是 3 的倍数输出x&#xff0c;否则输出o #include <bits/stdc.h> //#define int long long #define per(i,j,k) for(int (i)(j);(i)<(k);(i)) #define rep(i,j,k) for(int (i)(j);(i)>(k);--(i)) #define debug(a) cout<<#…

HTTP详解及代码实现

HTTP详解及代码实现 HTTP超文本传输协议 URL简述状态码常见的状态码 请求方法请求报文响应报文HTTP常见的HeaderHTTP服务器代码 HTTP HTTP的也称为超文本传输协议。解释HTTP我们可以将其分为三个部分来解释&#xff1a;超文本&#xff0c;传输&#xff0c;协议。 超文本 加粗样…

开源 _ 新一代Android 性能监控框架Rabbit

最终扫描结果会展示如下: 点击右上角导出按钮可以把扫描结果以json的形式导出到SD卡中。 网络日志监控 rabbit可以记录网络请求日志并方便的查看返回的json数据: 卡顿日志监控 rabbit通过Choreographer来检测主线程的运行情况,并异步采集主线程堆栈来还原卡顿现场。 对于下…

总包不足80w的高龄Android程序员,被面试官diss混得太差,网友狂吐槽……

有网友直言&#xff1a;90%的人一辈子一年也拿不到80万 有网友分析到&#xff1a;看面试情况&#xff0c;没什么希望就直接其实我觉得30岁年薪低于1000万的都是loser&#xff0c;你我都是 有网友说&#xff1a;这几年互联网行业极大发展&#xff0c;让互联网行业成为了明星行…

2_6.Linux高级存储管理

##1.逻辑卷## pv ##物理卷 被处理过的物理分区 pe ##物理扩展 设定存储最小单元 vg ##物理卷组 捆绑pv到一个组中 lv ##逻辑卷 分配最终的使用设备 监控建立过程&#xff1a; watch -n 1 "pvs;echo ;vgs;echo ;lvs;echo ;df -h /weixindata" &#xff08;1&#xf…

合理早餐选择,稳定糖尿病血糖。

对于糖尿病患者来说&#xff0c;饮食管理是治疗的重要一环。不合理的早餐选择会导致血糖的波动。很多糖尿病朋友按时吃药&#xff0c;但是血糖就是稳定不住&#xff0c;之前看过一个例子&#xff0c;北京崇文门医院朱学敏主任接诊过一个患者&#xff0c;那个患者按时吃药&#…

C++设计模式:装饰器模式(四)

1、定义与动机 装饰器模式定义&#xff1a;动态&#xff08;组合&#xff09;地给一个对象增加一些额外的职责。就增加功能而言&#xff0c;Decorator模式比生成子类&#xff08;继承&#xff09;更为灵活&#xff08;消除重复代码 & 减少子类个数&#xff09;。 在某些情…

ARM体系结构

阅读引言&#xff1a; arm架构处理器的基本知识已在上一篇文章中描述过了&#xff0c; 本文将会从arm的存储模型、异常机制、工作模式、指令集、流水线、arm的寄存器组织方面去描述。 目录 一、ARM处理器概论 1.指令集概述 2.指令分类 3.编译流程 二、ARM的存储模型 1.AR…

电商技术揭秘七:搜索引擎中的SEO关键词策略与内容优化技术

文章目录 引言一、关键词策略1.1 关键词研究与选择1. 确定目标受众2. 使用关键词研究工具3. 分析搜索量和竞争程度4. 考虑长尾关键词5. 关键词的商业意图6. 创建关键词列表7. 持续监控和调整 1.2 关键词布局与密度1. 关键词自然分布2. 标题标签的使用3. 首次段落的重要性4. 关键…

C# 分布式自增ID算法snowflake(雪花算法)

文章目录 1. 概述2. 结构3. 代码3.1 IdWorker.cs3.2 IdWorkerTest.cs (测试) 1. 概述 分布式系统中&#xff0c;有一些需要使用全局唯一ID的场景&#xff0c;这种时候为了防止ID冲突可以使用36位的UUID&#xff0c;但是UUID有一些缺点&#xff0c;首先他相对比较长&#xff0c…

pyside6怎么使用Qt Designer设计自定义组件

第一步&#xff0c;新建一个自定义组件的python文件 from PySide6.QtWidgets import QPlainTextEdit from PySide6.QtCore import Signal,Qtclass CustomPlainTextEdit(QPlainTextEdit):enterPressed Signal(str)def __init__(self, parentNone):super().__init__(parent)def…

Vue+node.js蔬菜水果农产品网上商城管理系统

用户能够及时掌握最新的数据&#xff0c;并能有效地提升用户的服务水平。本制度的优势在于&#xff1a; &#xff08;1&#xff09;该系统将蔬菜信息及时地提供给使用者。使用者可以在任何时候登陆该网站查询相关资讯&#xff0c;所有资讯均真实可信&#xff0c;并严肃处理各项…