关于css 定位的一些事

[doreenChenD]

关于css定位的一些事

这个内容主要是学习了张鑫旭大神的一些博文以及慕课网上一些课程的一些收获

目录

• Float
• absolute
• relative
• BFC
• 叠层上下文

Float

• 初衷：文字环绕效果
  

• 特性：包裹性、破坏性
  包裹性： 相当于带有方向的display：inline-block; 可以有宽高
  破坏性： 浮动破坏了元素本身的inline boxes特性，使元素会从line boxes上脱离出来，跟随自身的方位属性，靠边排列，破坏了高度。

absolute

• 某些场合可以与float替换使用， block化，同样具有包裹性， 脱离文档流

• 无束缚absolute(绝对定位的margin定位)
  （1）无定位值的absolute元素可以使用margin 定位。
  （2）无定位值的absolute元素是个没有实际宽度的浮动元素。
  可以说，没有设置定位值的absolute元素是个普通又不普通的元素，普通之处在于其依旧在DOM tree中，对margin等属性敏感；不普通在于其实际的高宽都丢失了。

• 位置不变，上帝视角，去浮动， 超越overflow
  

• top, right, left, bottom, width, height
  相对于最近的边界 定位
  同时存在时， width、height、margin > top right left bottom

relative

• 相对于自己的位置
  top,left,right ,bottom 相对于自己
• 无侵入
  不影响其他元素布局，位置变化，但是不影响同层元素的位置
• 不脱离文档流
• 应用场景： 拖拽
• right，left，top ，bottom(斗争)
  top > bottom
  left>right

relative 、absolute 、fixed

• 限制作用
  对absolute 限制作用
  1.限制定位
  2.限制层级
  3.overflow 限制
  relative 与fixed
  限制z-index （当relative设置了z-index 子元素的fixed的层级将受影响）

BFC

• BFC 全称 “Block Formatting Context”, 中文为 “块级格式化上下文”。
• BFC元素特性变现原则就是，内部子元素再怎么翻江倒海都不会影响外部的元素，所以避免margin穿透呀，清除浮动什么的也好理解了。
• BFC的产生条件
  
  在BFC中，每一个盒子的左外边缘margin-left会触碰到容器的左边缘border-left(对于从右到左的格式来说，则触碰到右边缘)，及时存在浮动也是如此。

即不会发生margin穿透

计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）。

原本浮动元素应该是脱离文档流的，但是BFC中会计算其高度。

叠层上下文