当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

前端基础学习第十六天

2020-04-17 00:45前端开发基础 人已围观文章来源:未知文章作者:admin

简介定位 为什么需要定位 1.某个元素子可以自由的在一个盒子内移动位置,并且压住其他盒子。 浮动: 用法: 可以让块...

定位
 
为什么需要定位
 
1.某个元素子可以自由的在一个盒子内移动位置,并且压住其他盒子。
 
浮动:
 
用法: 可以让块级盒子在一行内排列。
 
定位
 
用法:可以让盒子自由自在移动,可以压住盒子。 可以固定
 
-------------------------------------------
定位的组成
 
定位:定位+ 边偏移
 
---------------------
静态定位
 
写法:position: static;//标准流
 
-----------------------------------------
相对定位 relative 
 
写法:position:relative;//相对定位
 
移动位置:
 
1.根据自身的位置,来移动位置
2.布局不会乱,标准流盒子不会动
 
 
1.绝对定位
 
绝对定位是元素在移动位置的时候,是相对于他的祖先元素来说的
 
特点:自身的位置不占有位置
 
写法:postion: absolute;
 
特点:
 
1.没有父级元素或者父元素没有定位:会以浏览器来对齐。
 
2.给父元素加上定位,那么子元素加定位就生效了。定位以相近的上级元素定位为准。
 
3.绝对定位不在占有原先的位置
 
-------------------------------------
 
固定定位
 
特点:
 
1.以浏览器窗口为参照移动元素
 
跟父元素没有任何关系
 
不随滚动条滚动
 
2.固定定位不在占有原先位置
 
固定定位优势脱标的。也可以看做是一种特殊绝对定位
 
-----------------------------------
固定定位 版心的固定
 
1.left:50%;
 
2.距离版心宽度的一半宽度
 
----------------------------
粘性定位
 
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
 
2.粘性定位,占有原先的位置
 
3.必须添加top left right bottom 其中一个才有效
 
4.页面滚动搭配使用, 兼容性较差。IE不支持
 
------------------------------------------------------
定位总结
 
定位模式 是否脱标 移动位置 是否常用
static静态定位 不能使用边偏移 很少
 
relative相对定位 是(占有位置) 相对于自身位置移动 常用
 
absolute绝对定位 是(不占有位置) 带有定位的父级 常用
 
fixed固定定位 是(不占有位置) 浏览器可视区 常用
 
sticky粘性定位 否(占有位置) 浏览器可视区 当前阶段少
 
知识点:
1.是否占有位置
 
2.以谁为基准点移动位置
 
 
----------------------------------------
 
定位
 
定位叠放次序 z-index
 
特点:
 
z-index: 1;
 
1.数值越大,盒子越靠上,默认是auto
 
2.属性值相同,那么后来居上
 
3.数字后面不能加单位
 
4.只有定位的盒子才有z-index属性 
 
5.注意。只有定位的盒子才有z-index属性,普通的盒子没有 
------------------------------------------
 
定位的扩展
 
盒子居中写法
 
水平居中写法:
left: 50%;
margin-left: -(负的)盒子宽度的一半;
垂直居中写法:
top:50%;
margin-top: -(负的)盒子高的的一半;
 
----------------------------------------------------------------
定位特殊性
 
1.行内元素直接添加绝对定位或者固定定位,可以直接设置高度和宽度
 
2.块级元素添加绝对定位或者固定定位,不给高度和宽度,默认是内容大小。
 
---------------------------------------
 
定位的拓展
 
1.浮动元素,只会压住标准流盒子,但是不会压住下面标准流盒子里面的文字(图片)
 
2.绝对定位,会压住下面标准流所有的内容
 
-------------------------------------------
 
 
 
 
网页布局总结
 
1.标准流
 
可以让盒子上下排列,或者左右排列  垂直块级就用标准流
 
2.浮动
 
多行块级盒子对齐。
 
3.定位
 
层叠的效果。固定的效果。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们