HTML5-3/25复习笔记

定位:
position
static 默认值,设置坐标无效
absolute (绝对定位)
特征:
1:脱离文档流,不占位置
2:默认参考浏览器零点
3: 如果有父级,且父级有定位,那就参考父级元素(默认定位除外)
想当于给子元素指定了参考物
relative:(相对定位)
特征:
1:占据文档流,占位置
2:参考自身加载在页面中的位置
fixed:(固定定位)
特征:1:脱离文档流,不占位置
2:元素固定在页面中不随着页面滚动而滚动
3:参考浏览器的00点
sticky:(粘性定位)
特征:
1: 页面达到一定高度时,脱离文档流
2:效果是吸附浏览器顶部

坐标位置 水平left right
垂直top bottom

包含块:形成镶嵌结构,且父级元素有设置定位positioin:relative

avsolute 和relative的区别
1:是否占据文档流。absolute不占据,relative占据
2:参考物不同,absolute参考html,relative参考本身加载到页面的位置

层级关系:
前提条件:必须有定位的元素才可以修改层级关系
属性:
z-index:; auto 默认值 number具体数字,可以为负数
并列关系:改变任何一个元素的层级关系都可以
嵌套关系:只能改变子集的层级关系

元素居中方式:
方式一:position:absolute:;/子元素改变自己的位置/
top:0px;
bottom:0px;
left:0px
right:0px;
margin:auto;/自适应/
方式二:position:absolute:;/子集作为被参考物/
top:50%;
left:50%;
margin-left:-50%;/负宽度值一半px/
margin-top:-50%;/负高度值的一半px/

发布了25 篇原创文章 · 获赞 0 · 访问量 394
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览