首页 > 其他分享 >大前端html基础学习03-定位锚点透明

大前端html基础学习03-定位锚点透明

时间:2022-12-02 21:00:44浏览次数:50  
标签:03 浏览器 定位 元素 绝对 html 锚点 position 属性

一、position 定位属性和属性值
position 定位属性,检索对象的定位方式;
语法:position:static /absolute/relative/fixed/sticky/unset/inherit(未设置是inherit和initial的结合)/initial(最初的,初始的)
取值:
1、static:默认值,无特殊定位,对象遵循HTML原则;
2、absolute:绝对定位,将对象从文档流中完全拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的

父元素进行绝对定位;如果不存在这样的父对象,则依据《浏览器》进行定位,而其层叠通过z-index属性定义
3、relative :相对定位遵循正常的文档流,将依据right,top,left,bottom(相对定位)等属性在正常文档流中相对自身位置进行偏移;其层叠通过z-index属性定义.
4、fixed:(固定定位),类似于绝对定位的方式,但是它的参照物是浏览器的“可视”窗口,且脱离标准文档流;

5、sticky:(粘性定位) 相对离自己最近且有滚动条的父元素做的定位

粘性定位,该定位是相对定位和固定定位的结合,在跨越特定阈值前类似相对定位,之后类似固定定位。

二、定位元素的层级属性
z-index : auto |number

设置定位对象的层叠顺序。
auto:默认值。遵循结构,后写的定位元素层的顺序靠上。
number:无单位的整数值。可为负数,数值越大,层的顺序越靠上

说明:
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed ,sticky的对象。

三、包含块的概念及作用
包含块是绝对定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;
默认状态下,浏览器是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

绝对和相对定位的区别

1、参照物不同,绝对定位(absolute)的参照物是包含块(父级),相对定位的参照物是元素本身位置;

2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

四、锚点连接的语法和应用场景
命名锚点的作用:在同一页面内的不同位置进行跳转。
锚点链接语法:
1)给元素定义命名锚记名
语法:<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法:<a href="#命名锚记名称">链接文本或图片</a>

五、透明写法
IE9以下浏览器写法:filter:alpha(opacity=value);取值范围 0-100之间的整数值
兼容其他浏览器写法:opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9---1)

rgba(255,255,0,0.5)(最后一位值表示透明,取值范围0-1) 只支持IE8以上的浏览器
————————————————
版权声明:本文为CSDN博主「巴布鲁哈哈哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_45275992/article/details/128154368

标签:03,浏览器,定位,元素,绝对,html,锚点,position,属性
From: https://www.cnblogs.com/JJDbd/p/16945592.html

相关文章

  • ansible彩色输出转换为html格式
    实现目标:将在后台运行(非tty终端环境)的ansible输出结果作为日志转换为html在浏览器显示:技术背景:我司使用的运维平台,使用flask框架搭建。对各个操控主机使用ansible进行操作,......
  • eclipse中编写Java程序出现Resource leak: 'input' is never closed解决方法
     菜鸟新手,在​​Java​​的简单程序编写过程中,如上代码出现了小小的提示,这种简短的小程序,不关闭也可以运行出正确的结果,由于强迫症,对于这点小毛病也是不能容忍的,再查了百......
  • day03--Scanner用户交互
    用户交互Scanner对象基本语法Scanners=newScanner(System.in);通过Scanner类的next()与nextLine()方法获取输入的字符串,再读取前我们一般需要使用hasNext()与ha......
  • 分享45款高质量的免费(X)HTML/CSS模板
    ​​GreenPlanet​​(​​演示​​​|​​下载​​)​​​​​​CreativeStudio​​(​​演示​​​|​​下载​​)​​​​​​RestaurantWebsite​​(​​演示......
  • 你应该知道的10个奇特的 HTML5 单页网站
    网页设计师努力寻找新的方式来展现内容。其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且美丽的网站。 ​​......
  • html5文件分片上传,断点续传
    ​ 1、介绍enctypeenctype 属性规定发送到服务器之前应该如何对表单数据进行编码。enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样)1、......
  • 蓝桥杯 ADV-103算法提高 逆序排列
    关键字循环语句数组操作问题描述编写一个程序,读入一组整数(不超过20个),并把它们保存在一个整型数组中。当用户输入0时,表示输入结束。然后程序将把这个数组中的值按......
  • STM32f103 蜂鸣器发声
    一、蜂鸣器简介蜂鸣器是一种一体化结构的电子讯响器,采用直流电压供电,广泛应用于计算机、打印机、复印机、报警器、电子玩具、汽车电子设备、电话机、定时器等电子产品中......
  • 力扣03 返回最大不重复子串的长度
    力扣03返回最大不重复子串的长度题目:给定一个字符串s,请你找出其中不含有重复字符的最长子串的长度。示例1:输入:s="abcabcbb"输出:3解释:因为无重复字符......
  • 使用HTTPCLIENT去生成静态HTML页面
    一般生成HTML页时,都会用比如freemarker等去搞,但今天看到和学到一个还应该不错的方法,是使用httpclient的get方法,去读某个动态的URL,然后把读出的内容再......