一、position定位属性,检索对象的定位方式

  1.语法:{position:static(无特殊定位)/absolute(绝对定位)/relative(相对定位)/fixed(固定定位);}

    1)static:默认值,无特殊定位,对象遵循HTML原则;

    2)absolute:绝对定位,将其从文档流中脱出,使用left/right/top/bottom等属性相对其最接近的一个有定位设置的父元素进行绝对定位;如果不存在这样的父元素,则依据窗口对象定位,而其层叠通过z-index属性定义;

    3)relative:相对定位,将依据right/top/left/bottom(相对定位)等属性在正常文档流中偏移位置;

    4)fixed:固定定位,相对于浏览器的定位,是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过right/left/top/bottom属性来规定;不论窗口滚动与否,元素都会留在那个位置;

    5)inherit:继承父元素的position属性,但需要注意的事IE8以及之前版本的浏览器都不支持inherit属性;

    6)sticky:粘性定位:设置了sticky的元素,在屏幕范围(viewport)时,该元素的位置并不收到影响(设置是top、left等属性无效),当该元素的位置将要移除偏移范围时,定位又会变成fixed,根据left、top等属性称固定位置效果。

  2.包含块的概念及作用

    1)包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标、偏移和显示范围的参照物即、确定绝对定位的偏移起点和百分比、长度的参考;

    2)默认状态下,窗口是一个大的包含块,所有绝对定位的元素都是根据窗口来定位自己所处的位置和百分比大小显示的,如果我们定义了包含元素为包含块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置;

    3)定义元素为包含块,给绝对定位的父元素添加声明:position:relative;

  3.元素透明属性:{opacity:value;(value取值范围在0~1)}

    兼容:{filter:alpha(opacity=value);(value取值范围在1~100)}(兼容IE8及以下版本的浏览器)

  4.命名锚点链接的应用

    1)定义:是网页中超链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍;

    2)命名锚点链接的应用:(1)命名锚点的作用:在页面内不同的位置进行跳转

                 (2)给元素定义命名锚记名:<标记 id=“命名锚记名”></标记>

                 (3)命名锚记链接:<a herf="#命名锚记名"></a>

  5.绝对定位和相对定位的区别

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

    2)绝对定位将对象从文档流中拖出,相对定位不破坏正常的文档流顺序;

  6.定位元素的层叠属性:z-index:auto/number(数值,并且不加单位)

    1)检索或设置对象的层叠顺序:auto(默认值,堆叠顺序与父元素相等)

                    number(设置元素的堆叠顺序)

    注:number较大值的对象会覆盖较小值的对象,如果绝对定位对象的number值一样大时,那么将依据他们在HTML文档中声明的顺序层叠,此属性仅仅作用于position的值为relative/absolute/fixed/sticky的对象上。

HTML学习笔记Day7的更多相关文章

  1. sqli-labs学习笔记 DAY7

    DAY7 sqli-labs阶段总结 基本步骤 判断是否报错 判断闭合符号 判断注入类型 构建payload 手工注入或者编写脚本 基本注入类型 报错型注入 floor公式(结果多出一个1):and ...

  2. python学习笔记-Day7

    class Province: # 静态字段(类变量/属性) country = '中国' def __init__(self, name): # 普通字段(实例变量/属性) self.name = ...

  3. JS学习笔记Day7

    一.ES5扩展方法 1.严格模式"use strict" 1)必须加在作用域的开头 2.数组扩展方法 1)indexOf(元素,从哪个下标开始查找) 作用:在数组中查找指定的元素第 ...

  4. Python学习笔记 - day7 - 类

    类 面向对象最重要的概念就是类(Class)和实例(Instance),比如球类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各自的数据可能不同.在Python中,定义类 ...

  5. 【目录】Python学习笔记

    目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...

  6. python笔记 - day7

    python笔记 - day7 参考: http://www.cnblogs.com/wupeiqi/articles/5501365.html 面向对象,初级篇: http://www.cnblog ...

  7. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  9. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

随机推荐

  1. jdbc工具类1.0

    package cn.zhouzhou; import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManag ...

  2. 【Python练习题】程序3

    3.题目:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?x+100 = n*nx+100+168 = m * m 所以(m+n)*(m-n) =168 #题 ...

  3. opencv imdecode和imencode用法

    主要是对内存数据自动编解码 string fname = "D:/image.jpg"; //! 以二进制流方式读取图片到内存 FILE* pFile = fopen(fname. ...

  4. kubernetes 基本命令

    查询命令: kubectl get pods -n kube-system kubectl get ClusterRole -n kube-system kubectl get ClusterRole ...

  5. Docker最全教程

    摘自雪雁大佬的博客,地址:https://www.cnblogs.com/codelove/default.html 目录: Docker最全教程——从理论到实战(一) Docker最全教程——从理论 ...

  6. Java异步、线程池解决方案

    一.ThreadPoolExecutor------线程池 private static final ThreadPoolExecutor threadPoolExecutor = new Threa ...

  7. requests简单应用

    requests发送get请求 无参数的get请求: response = requests.get(url='http://ws.webxml.com.cn/WebServices/WeatherW ...

  8. luogu P3128 [USACO15DEC]最大流Max Flow (树上差分)

    题目描述 Farmer John has installed a new system of N-1N−1 pipes to transport milk between the NN stalls ...

  9. 洛谷P4891 序列(势能线段树)

    洛谷题目传送门 闲话 考场上一眼看出这是个毒瘤线段树准备杠题,发现实在太难调了,被各路神犇虐哭qwq 考后看到各种优雅的暴力AC......宝宝心里苦qwq 思路分析 题面里面是一堆乱七八糟的限制和性 ...

  10. HDU46093-idiots

    题目大意 给一堆边的长度,问从中随机选出三条边来能够组成三角形的概率. 题解 其实就是要求能够组成三角形的方案数.直接从三条边入手问题会很复杂,所以我们可以先求出f[x]表示随便选出两条边长度之和为x ...