博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTMLCSS学习笔记(五)----定位详解、层级、滤镜遮罩
阅读量:5886 次
发布时间:2019-06-19

本文共 1054 字,大约阅读时间需要 3 分钟。

 

  • 相对定位

 position:relation  相对定位

 a,不影响元素的本身的特性

 b,不使文档脱离文档流

 c,如果没有定位偏移量,对元素本身没有任何影响

  定位元素位置控制

 top/right/bottom/left 定位元素偏移量

 只针对定位元素有效果

  • 绝对定位

  position:absolute 绝对定位 (是相对于整个文档发生定位偏移

 a,使元素完全脱离文档流

 b,使内嵌支持宽高

 c,块属性标签内容撑开宽度

 d,如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档发生偏移

 (元素越过结构父级找到最近的定位父级,定位父级和结构父级可以是同一个)

 e,相对定位一般是配合绝对定位使用的

 定位元素 默认后者层级高于前者

 

 z-index:[number]: 定位层级

 数值越高,层级越高

 

 body< html < 文档


 

 a.link 拥有class=link3的a标签

 div#box 拥有id叫box 的div标签

 这个选择符的优先级与 .class .class{} 相同

 


 

  • 滤镜和遮弹窗

 

  蒙版设置注意点

 1.标准浏览器下  不透明度 opacity:0~1

 2.IE私有 filter:alpha(opacity=0~100)

 3.IEtester不支持IE滤镜

 4.body < html < 文档

  body,html{height:100,body和html的高度和文档高度相同

  弹窗

 让一个盒子始终在页面中左右上下居中 使用绝对定位和margin完成

 {position:absolute;left:50%;top:50%;

 margin-top:1/2(自身高度一半);margin-left:(自身宽度的一半);}

 自身是整个盒子的大小!!!

 


 

  • 固定定位

 

 position:fixed 固定定位

 (与绝对定位基本一致,但固定定位是始终相对整个文档进行定位)

 但IE6不支持此条命令。

 position:static 默认值(相当于没有定位)

 position:inherit 从父元素继承定位属性的值

 


 

 

 若父级包不住子级,可在父级加overflow:hidden

 在ie6下 ,父级的overflow:hidden是包不住子级的相对定位的

 在ie6下,定位元素的父级宽高为奇数的话,那么在ie6下定位元素的right和bottom都有1px的偏差

 绝对定位和固定定位也有清浮动的效果

 


 

转载于:https://www.cnblogs.com/BBeyes/p/6577598.html

你可能感兴趣的文章
PHP队列的实现
查看>>
单点登录加验证码例子
查看>>
[T-SQL]从变量与数据类型说起
查看>>
稀疏自动编码之反向传播算法(BP)
查看>>
二叉搜索树转换成双向链表
查看>>
会员数据化运营
查看>>
WebLogic和Tomcat的区别
查看>>
java类中 获取服务器的IP 端口
查看>>
调用约定__stdcall / __cdecl
查看>>
occActiveX - ActiveX with OpenCASCADE
查看>>
redmine
查看>>
css 序
查看>>
DirectshowLib摄像头拍照的”未找到可用于建立连接的介质筛选器组合“ 解决办法...
查看>>
Django之用户认证组件
查看>>
python如何使用 os.path.exists()--Learning from stackoverflow ...
查看>>
wcf-1
查看>>
关于分区表的初探
查看>>
Xcode 6 下添加pch头文件
查看>>
三种简单排序
查看>>
curl 向远程服务器传输file文件
查看>>