html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
————8 定位网页元素————
51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置。
(1)static 默认无定位,元素按照标准文档布局。
(2)relative相对定位
a.特性:
1.以标准文档流排版为基础,相当于它在原来位置偏移指定的距离。
2.元素位置偏移后,仍会保留原位置。
3.层级提高,可以遮盖标准文档流元素和浮动元素。
b.使用场景:
相对定位可以不设偏移量,让后面的绝对定位以它为祖先元素作基准定位。
c.语法 position:relative,指定偏移量时:水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute绝对定位
a.特性:
1.以已定位的祖先元素作基准定位,如果没有定位的祖先元素,则以浏览器窗口为基准定位。
2.元素位置偏移后,不保留原位置(其他元素可以用它原来的空位)
3.层级提高,可以遮盖标准文档流元素和浮动元素。
4.设置绝对定位的元素脱离文档流,对其他盒子的定位无影响
b.使用场景:下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。
(4)fixed固定定位
a.特性:直接以浏览器窗口为基准定位,偏移位置不受窗口滚动条滚动的影响。
b.使用场景:窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。
52.z-index属性:设置定位元素的堆叠顺序。默认值0,值大的层位于值小层的上方。
(1)网页中的元素都含有两个堆叠层级,一个是未设置绝对定位时所处的环境,此时z-index是0;另一个是设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定。
53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
(1)opacity:x x值为0~1,值越小越透明
(2)filter:alpha(opacity=x) x值为0~100,值越小越透明
HTML CSS整理笔记更多笔记
html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素相关推荐
- css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...
- DIV+CSS布局概述、属性(浮动、定位等)、布局类型、常见布局技巧
文章目录 布局概述 网页布局 页面元素定位机制 布局常用属性 浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
- rem和em学习笔记及CSS预处理
rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 View Code parent-div中的em-div ...
- 关于js css html加载顺序整理
参考原文 豆豆蛙:关于js css html加载顺序整理 1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正 ...
- 大数据 -- kafka学习笔记:知识点整理(部分转载)
一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...
- 韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
- CSS 布局经典问题初步整理
本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等. CSS 基础知识 ...
- 【HTML/CSS】从放弃到入门-笔记1
从放弃到入门1 ⇒ 从放弃到入门2 了解浏览器 浏览器和服务器(了解) 浏览器是一款软件,浏览器功能:1将网页渲染出来给用户查看,2让用户通过浏览器与网页交互 不同浏览器的内核不同,渲染效果会有小的差 ...
- 前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录 一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...
最新文章
- 用Leangoo Scrum看板工具做多团队大规模敏捷
- corrplot包绘制相关性图
- 第三章 笔记本电脑案例
- java sqlserver 2000_谁能救救我啊,关于JAVA连接SQLserver2000
- 预付卡管理信息系统_校园寝室桶装水配送管理信息系统分析和设计
- vue_props div赋值props定义变量 templete获取
- DIV+CSS相对IE6、IE7和IE8的兼容问题
- vb 字符串截取_VB进阶之玩转文件读写
- springboot中配置过滤器以及可能出现的问题
- LoadRunner去除事物中的程序的执行时间
- Erlang 之父两点忠告:不要在疲惫时写代码、先思考再编程
- 论文文献引用格式总结整理
- 我为什么鼓励工程师写 blog?
- matlab引用csv文件,如何用MATLAB读取csv文件
- 【论文笔记】Predictive control of aerial swarms in cluttered environments
- 搭建文字转语音(TTS)服务器
- 计算机玩游戏代码,给计算机学院的学幼们贴一些游戏代码
- 几何变换详解:平移、缩放、旋转
- 云计算的定义、本质、技术和未来
- 算法(4)购物篮分析