CSS 定位学习
标签：
一 CSS布局的三种机制1.标准流
2.浮动(盒子脱离标准流 浮起来 盒子水平排列)
3.定位(将盒子定在某一位置 自由的漂浮在其他盒子上面 css 离不开定位 特别是js特效)
二 为什么使用定位
要实现以上效果，，不使用定位是非常困难的
将盒子定在某一个位置，自由的漂浮在其他盒子(包括标准流和浮动之上)
所以我们脑海中应该有三种布局机制的上下顺序
标准流(最底层) ->浮动的盒子在中间层->定位的盒子在最上层
三 定位详解定位也是用来布局的，有两部分组成
定位 = 定位模式 + 边偏移
1> 边偏移
在CSS中 通过 top bottom right left 属性定义元素的边偏移
定位的盒子有了边偏移 才有价值 一般情况下 凡是有定位的地方都有边偏移
2> 定位模式(定位的分类)在CSS中 通过position属性定义元素的定位模式 语法如下
选择器 {position:属性值}
定位模式是有不同的分类的 在不同的情况下 我们使用不同的定位模式
静态定位 是元素默认的定位方式 无定位的意思 相当于 border 里面的none属性 就是无定位
静态定位 按照标准流特性摆放位置 没有边偏移
静态定位在布局时我们几乎是不用的
2:相对定位(relative) 重要相对定位 是元素 相对于它 原来的位置 来说的
相对定位的特点:
相对于自己原来的位置移动
原来在标准流中 占有的位置 继续占有 后面的盒子仍然以标准流的方式对待它
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>相对定位</title> <style> div { width: 100px; height: 100px; background-color: pink; } .two { background-color: purple; /* 定位 = 定位模式 + 边偏移 */ /* 虽然盒子走了 但是在标准流中仍然还有他的位置 没有脱标 */ position: relative; top: 50px; left: 50px; } </style> </head> <body> <div></div> <div class="two"></div> <div></div> </body> </html>
3:绝对定位(absolute)-重要绝对定位是元素以带有定位的父级元素来移动位置
父级元素没有定位 就以浏览器为标准定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>绝对定位</title> <style> .father { width: 350px; height: 350px; background-color:pink; margin: 100px; /* 标准流的盒子 总是以父级为准移动位置 */ /* 绝对定位 如果父级没有定位 那么绝对定位的盒子 会以我们文档为准 浏览器为准移动位置 离自己最近的已经定位的为准 */ /* 如果有一下代码 则以父亲为准移动位置 */ /* position: relative; */ } .son { /* 如果父级没有定位 则以浏览器为标准 */ width: 200px; height: 200px; background-color: purple; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div class="father"> <div class="son"> </div> </div> </body> </html>
绝对定位的特点
是以带有定位的父级元素来移动位置 如果父级没有移动 则以浏览器文档为标准移动
不保留原来的位置 完全是脱标的
定位的口诀
子绝父相 :子级是绝对定位 父级要用相对定位
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/39953.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")