HTML（第八章） 标签： 定位网页元素

最新推荐文章于 2024-05-02 20:15:52 发布
最新推荐文章于 2024-05-02 20:15:52 发布
阅读量958 收藏 1
点赞数
文章标签： html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61835031/article/details/125695675
版权

HTML（第八章）

标签： 定位网页元素

定位网页元素

position 属性指定了元素的定位类型。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
偏移设置：top、left、right、bottom
static 定位

  • HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  • 静态定位的元素不会受到 top, bottom, left, right影响。

relative 定位

  • 相对定位元素的定位是相对其正常位置。
    移动相对定位元素，但它原本所占的空间不会改变。
    相对定位元素经常被用来作为绝对定位元素的容器块。
    设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
    设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
    设置相对定位的盒子原来的位置会被保留下来
  • 相对定位的使用场景
    相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

absolute绝对定位

  • 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
    如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
    祖先元素通常是在父元素中设置relative 定位，可以不设置偏移量
    绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
    元素位置发生偏移后，它原来的位置不会被保留下来
    absolute 定位使元素的位置与文档流无关，因此不占据空间。
    absolute 定位的元素和其他元素重叠。
  • 绝对定位的使用场景
    一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
  • 绝对定位不设置偏移量
    设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
    在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
    absolute和relative经常配合使用

fixed 定位

  • 元素的位置相对于浏览器窗口是固定位置。类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
  • 即使窗口是滚动的它也不会移动
  • Fixed定位使元素的位置与文档流无关，因此不占据空间。
  • Fixed定位的元素和其他元素重叠。
  • 固定定位的使用场景
    一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

重叠的元素

  • z-index属性
  • 调整元素定位时重叠层的上下位置
  • z-index属性值：整数，默认值为0
  • 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
  • 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
  • z-index值大的层位于其值小的层上方
  • 一个元素可以有正数或负数的堆叠顺序
    具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
    网页中的元素都含有两个堆叠层级
    未设置绝对定位时所处的环境，默认z-index是0
    设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
    改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可
    标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
    注意： 如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。

sticky 定位

  • sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
  • position: sticky; 基于用户的滚动位置来定位。
  • 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
  • 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
  • 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
  • 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

网页元素透明度

Opacity属性设置一个元素了透明度级别。

|值| 描述|
|-||
|value| 指定不透明度。从0.0（完全透明）到1.0（完全不透明）|
|filter:alpha(opacity=x)|x值为0~100，值越小越透明|
如果使用此透明效果要注意，此属性会将盒子内的字体也一起进行透明 可以使用rgba()属性

m0_61835031
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
第1章　基础知识 1 1.1　canvas元素 1 1.1.1　canvas元素的大小与绘图表面的大小 4 1.1.2　canvas元素的api 5 1.2　canvas的绘图环境 6 1.2.1　2d绘图环境 6 1.2.2　canvas状态的保存与恢复 8 1.3　本书程序清单的规范格式 9 1.4　开始学习html5 10 1.4.1　规范 10 1.4.2　浏览器 11 1.4.3　控制台与调试器 11 1.4.4　性能 13 1.5　基本的绘制操作 15 1.6　事件处理 18 1.6.1　鼠标事件 18 1.6.2　键盘事件 22 .1.6.3　触摸事件 23 1.7　绘制表面的保存与恢复 23 1.8　在canvas中使用html元素 25 1.9　打印canvas的内容 32 1.10　离屏canvas 35 1.11　基础数学知识简介 37 1.11.1　求解代数方程 37 1.11.2　三角函数 38 1.11.3　向量运算 39 1.11.4　根据计量单位来推导等式 42 1.12　总结 44 第2章　绘制 45 2.1　坐标系统 46 2.2　canvas的绘制模型 47 2.3　矩形的绘制 48 2.4　颜色与透明度 50 2 .5　渐变色与图案 52 2.5.1　渐变色 52 2.5.2　图案 54 2.6　阴影 57 2.7　路径、描边与填充 60 2.7.1　路径与子路径 63 2.7.2　剪纸效果 64 2.8　线段 69 2.8.1　线段与像素边界 70 2.8.2　网格的绘制 71 2.8.3　坐标轴的绘制 72 2.8.4　橡皮筋式的线条绘制 74 2.8.5　虚线的绘制 79 2.8.6　通过扩展canvasrenderingcontext2d来绘制虚线 80 2.8.7　线段端点与连接点的绘制 81 2.9　圆弧与圆形的绘制 83 2.9.1　arc()方法的用法 83 2.9.2　以橡皮筋式辅助线来协助用户画圆 85 2.9.3　arcto()方法的用法 86 2.9.4　刻度仪表盘的绘制 88 2.10　贝塞尔曲线 93 2.10.1　二次方贝塞尔曲线 93 2.10.2　三次方贝塞尔曲线 95 2.11　多边形的绘制 97 2.12　高级路径操作 102 2.12.1　拖动多边形对象 102 2.12.2　编辑贝塞尔曲线 107 2.12.3　自动滚动网页，使某段路径所对应的元素显示在视窗中 115 2.13　坐标变换 116 2.13.1　坐标系的平移、缩放与旋转 116 2.13.2　自定义的坐标变换 119 2.14　图像合成 123 2.15　剪辑区域 128 2.15.1　通过剪辑区域来擦除图像 128 2.15.2　利用剪辑区域来制作伸缩式动画 133 2.16　总结 135 第3章　文本 137 3.1　文本的描边与填充 137 3.2　设置字型属性 141 3.3　文本的定位 144 3.3.1　水平与垂直定位 144 3.3.2　将文本居中 146 3.3.3　文本的度量 147 3.3.4　绘制坐标轴旁边的文本标签 148 3.3.5　绘制数值仪表盘周围的文本标签 151 3.3.6　在圆弧周围绘制文本 152 3.4　实现文本编辑控件 154 3.4.1　指示文本输入位置的光标 154 3.4.2　在canvas中编辑文本 159 3.4.3　文本段的编辑 163 3.5　总结 174 第4章　图像与视频 175 4.1　图像的绘制 176 4.1.1　在canvas之中绘制图像 176 4.1.2　drawimage()方法的用法 177 4.2　图像的缩放 179 4.3　将一个canvas绘制到另一个canvas之中 183 4.4　离屏canvas 186 4.5　操作图像的像素 189 4.5.1　获取图像数据 189 4.5.2　修改图像数据 195 4.6　结合剪辑区域来绘制图像 208 4.7　以图像制作动画 211 4.8　图像绘制的安全问题 216 4.9　性能 216 4.9.1　对比drawimage(htmlimage)、drawimage(htmlcanvas)与putimagedata()的绘图效率 217 4.9.2　在canvas中绘制另一个canvas与绘制普通图像之间的对比；在绘制时缩放图像与保持原样之间的对比 217 4.9.3　遍历图像数据 218 4.10　放大镜 222 4.10.1　使用离屏canvas 224 4.10.2　接受用户从文件系统中拖放进来的图像 225 4.11　视频处理 227 4.11.1　视频格式 227 4.11.2　在canvas中播放视频 229 4.11.3　视频处理 230 4.12　总结 234 第5章　动画 235 5.1　动画循环 235 5.1.1　通过requestanimationframe()方法让浏览器来自行决定帧速率 237 5.1.2　internet explorer浏览器对requestanimationframe()功能的实现 241 5.1.3　可移植于各浏览器平台的动画循环逻辑 241 5.2　帧速率的计算 248 5.3　以不同的帧速率来执行各种任务 249 5.4　恢复动画背景 250 5.4.1　利用剪辑区域来处理动画背景 250 5.4.2　利用图块复制技术来处理动画背景 252 5.5　利用双缓冲技术绘制动画 253 5.6　基于时间的运动 254 5.7　背景的滚动 257 5.8　视差动画 261 5.9　用户手势 264 5.10　定时动画 266 5.10.1　秒表 266 5.10.2　动画计时器 269 5.11　动画制作的最佳指导原则 270 5.12　总结 271 第6章　精灵 272 6.1　精灵概述 273 6.2　精灵绘制器 275 6.2.1　描边与填充绘制器 275 6.2.2　图像绘制器 279 6.2.3　精灵表绘制器 281 6.3　精灵对象的行为 284 6.3.1　将多个行为组合起来 285 6.3.2　限时触发的行为 287 6.4　精灵动画制作器 289 6.5　基于精灵的动画循环 293 6.6　总结 294 第7章　物理效果 295 7.1　重力 295 7.1.1　物体的下落 296 7.1.2　抛射体弹道运动 298 7.1.3　钟摆运动 307 7.2　时间轴扭曲 311 7.3　时间轴扭曲函数 315 7.4　时间轴扭曲运动 317 7.4.1　没有加速度的线性运动 319 7.4.2　逐渐加速的缓入运动 320 7.4.3　逐渐减速的缓出运动 322 7.4.4　缓入缓出运动 323 7.4.5　弹簧运动与弹跳运动 324 7.5　以扭曲后的帧速率播放动画 326 7.6　总结 332 第8章　碰撞检测 333 8.1　外接图形判别法 333 8.1.1　外接矩形判别法 333 8.1.2　外接圆判别法 334 8.2　碰到墙壁即被弹回的小球 336 8.3　光线投射法 337 8.4　分离轴定理（sat）与最小平移向量（mtv） 340 8.4.1　使用分割轴定理检测碰撞 340 8.4.2　根据最小平移向量应对碰撞 362 8.5　总结 373 第9章　游戏开发 374 9.1　游戏引擎 374 9.1.1　游戏循环 376 9.1.2　加载图像 382 9.1.3　同时播放多个声音 384 9.1.4　键盘事件 385 9.1.5　高分榜 386 9.1.6　游戏引擎源代码 387 9.2　游戏原型 395 9.2.1　游戏原型程序的html代码 396 9.2.2　原型程序的游戏循环 399 9.2.3　游戏原型程序的加载画面 400 9.2.4　暂停画面 402 9.2.5　按键监听器 404 9.2.6　游戏结束及高分榜 404 9.3　弹珠台游戏 407 9.3.1　游戏循环弹珠 408 9.3.2　弹珠精灵 410 9.3.3　重力与摩擦力 411 9.3.4　弹板的移动 412 9.3.5　处理键盘事件 413 9.3.6　碰撞检测 416 9.4　总结 425 第10章　自定义控件 426 10.1　圆角矩形控件 427 10.2　进度条控件 433 10.3　滑动条控件 437 10.4　图像查看器控件 446 10.5　总结 454 第11章　移动平台开发 455 11.1　移动设备的视窗 456 11.2　媒体特征查询技术 461 11.2.1　媒体特征查询与css 461 11.2.2　用javascript程序应对媒体特征的变化 462 11.3　触摸事件 464 11.3.1　touchevent对象 464 11.3.2　touchlist对象 465 11.3.3　touch对象 466 11.3.4　同时支持触摸事件与鼠标事件 466 11.3.5　手指缩放 468 11.4　ios5 469 11.4.1　应用程序图标及启动画面 469 11.4.2　利用媒体特征查询技术设置ios5系统的应用程序图标及启动画面 470 11.4.3　以不带浏览器饰件的全屏模式运行应用程序 471 11.4.4　应用程序的状态栏 471 11.5　虚拟键盘 472 11.6　总结 485
html定位属性及应用案例
qq_50748038的博客
08-04 2460
html定位属性，返回顶部和导航栏悬浮设置
HTML---定位
hafk12的博客
04-06 1128
就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。首先，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-12 1239
一、HTML 标签简介、 二、HTML 骨架标签、 三、双标签和单标签、 四、嵌套关系和并列关系、 五、文档类型、 六、页面语言、 七、编码字符集、 八、排版标签、 九、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 )、 十、标签属性、 十一、图像标签、 十二、链接标签、 十三、注释标签、 十四、文件路径、 十五、锚点定位、 十六、base 标签、 十七、预格式化文本标签、 十八、HTML 特殊符号、
CSS的简单学习（6）
wqksoul的博客
11-28 378
实训
CSS详解
02-26
CSS 详解，包括规则，属性等。
定位
weixin_45800832的博客
11-05 247
position：static； 默认值，没有定位 position：relative；相对定位 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置； 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响； 设置相对定位的盒子原来的位置会被保留下来。 position：absolute；绝对定位 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为...
HTML_定位网页元素
weixin_33772645的博客
11-08 157
一.定位网页元素 position ： 1.static :默认值，代表没有定位，元素没有定位会以标准文档流方式展现出来 2.relative :相对定位，元素以自身原来位置进行定位（如果设置元素浮动，那么会以浮动后的位置作为原来的位置） 规律： 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 设置相对定位的盒子仍在标准文档流中，它对父级盒...
CSS基础/css详解
m0_65878076的博客
03-12 1207
一：css介绍 1.1：什么是css？ css全称叫做CaseCading Style Sheets css是在hTML的基础上用来告诉浏览器html里面的内容以什么样的方式呈现给大家 用css来渲染html，让我们的页面看起来更有层次感，更好看。 最重要的是，它可以同时控制多个页面的布局，可以大量节约我们的时间。 二：css的引入（也可以说和html怎么结合在一起使用） css引入的方式有四种，我们看看他们的区别， 2.1：第一种行内式： 行内模式就是在我们的...
HTML常用定位标签
weixin_30632089的博客
06-07 244
1.border-radius:15px;//简写属性，设置四个元素圆角边框2.margin-left:-18px;//设置边框到外边框的距离外边距3.font-size:25px;//设置字体大小4.position:absolute;//5.padding-right:20px;//设置文字的内容到边框的距离内边距,即前一个标签距 离6.text-align: left; //设置...
HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf
06-18
第8章 Forms API 166 8.1 HTML5 Forms概述 166 8.1.1 HTML Forms与XForms 166 8.1.2 功能性表单 167 8.1.3 HTML5 Forms的浏览器支持情况 167 8.1.4 输入型控件目录 168 8.2 使用HTML5 Forms API 172 8.2.1 新...
一看就懂，关于HTML5里面的定位 （position ）相对定位，绝对定位，固定定位 ，粘性定位；有图有对比 值得你的信赖（一个在千锋逆战班奋斗的年轻人）
vipdidi的博客
02-23 3049
*HTML5 定位## position:static(默认值)没有定位 position:relative(相对定位) position:absolute(绝对定位) Position:fixed(固定定位) position:sticky(粘性定位)（css3新增兼容不好） 作用 A.在正常情况下.可以让一个元素覆盖在另一个元素上面 B.可可以移动一个元素的位置 C.可以固定某个容器在浏览...
html中的定位知识点如何使用
小魏快起床的博客
11-23 3961
系列文章目录文章目录前言一、定位是什么？有什么用？二、定位方式有哪些？怎么使用？ 1、静态定位：就是默认的定位方式，意思就是没有定位; 2、相对定位： 3、绝对定位： 4、固定定位：固定定位永远参照于浏览器的视口进行定位三、相对定位解析： 1、 这里我们先用标准流写一个小demo： 2、得到一个效果图 ，是一个大盒子里面嵌了2个小盒子的效果：3、这个时候我要开始给盒子2号加相对定位，然后让其进行
HTML5之position定位
weixin_40763897的博客
04-17 2882
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position一般分为三种：绝对定位absolute，固定定位fixed，相对定位relative、静态定位static（默认） 1、position：relative 相对定位 采用相...
CSS知识全解
qq_54334713的博客
03-23 2519
css3复习大纲
CSS3 入门详解（一）
weixin_33965305的博客
11-26 570
前言 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 1.选择器 CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。 1.1 属性选择器 属...
基于php+mysql+html超市商品管理系统（含论文）
最新发布
Timi2019的博客
05-02 627
客户： 浏览商品信息，注册账号，修改自已的账号信息，购买商品，下发订单等管理员：对商品信息进行增删改查等维护工作，以及查看库存，查看销量和修改登录密码等。功能设计：（1）管理员注册超市的货物管理员在使用商品管理系统前应完成管理员信息的注册、及身份验证。（2）商品信息管理该模块实现商品信息的显示，也提供了新增，删除，修改和查询等功能。此外，在管理员点击某商品后，还可以显示出有关该商品的详细信息，以便于客户了解该商品。（3）商品库存数量管理该模块实现用户对商品库存数量的及时管理。
HTML5有哪些新特性？
02-20
2. 视频和音频支持：HTML5提供了和标签，使得在网页中嵌入视频和音频变得更加简单，不再需要依赖第三方插件。 3. Canvas绘图：HTML5的元素允许通过JavaScript来绘制图形、动画和游戏，为开发者提供了更多的绘图功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值