定位及BEC

定位

定位的应用场景和基本原理

定位的原理

• 在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置

position

• static 默认 静态定位

• • 默认的定位位置，不写就是静态定位

• relative 相对定位

• • 相对于自己本身移动(原来的位置保持不变，也不占用新的位置，不会影响页面布局）

• absolute 绝对定位

• • 子绝父相（当找不到父标签有相对定位的时候，就会继续向上找）

  • 相对于父标签（父标签相对定位，子标签绝对定位）

  • 脱离文档流也脱离文本流，也就是说图片，文字，输入框会到绝对定位下面

• fixed 固定定位

• • 相对于浏览器窗口

  • 不会随着滚动条滚动

总结一下position

定位	是否脱标	参考点	参数
static	否	无
relative	否	自己本身	left,right,top,bottom
absolute	是	父标签（子绝父相）	left,right,top,bottom
fixed	是	浏览器窗口	left,right,top,bottom

定位的技巧与层级关系

居中技巧

• 1、方案 1： top:50% left:50% margin-top:当前盒子高度的一半 margin-left :当前盒子宽度的一半

   <style>
      .wrap {
        width: 600px;
        height: 600px;
        border: 1px solid;
        position: relative;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        position: absolute;
        /* top:50% left:50%    margin-top:当前盒子高度的一半 margin-left :当前盒子宽度的一半*/
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
      }
    </style>

• 2、方案 2 margin:auto 实现绝对定位元素的居中（该方法兼容 ie8 以上浏览器）。 此方案代码关键点： （1）上下左右均 0 位置定位； （2）margin: auto。

    <style>
      .wrap {
        width: 600px;
        height: 600px;
        border: 1px solid;
        position: relative;
      }
  ​
      .box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        position: absolute;
        /* 上下左右值为0，加上  margin: auto; */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>

定位标签的层级属性 z-index

• 1、标签的定位与文档流无关，所以它们可以覆盖页面上的其它标签；

• 2、z-index 属性指定了一个标签的堆叠顺序；

• 3、具有更高堆叠顺序的标签总是在较低的堆叠顺序标签的前面；

• 4、如果两个定位标签重叠，没有指定 z - index，那么默认值都是 0，最后定位在 HTML 代码中的标签将被 显示在最前面。数值越大，层级越高。

浮动和定位的对比

• 浮动的元素脱离文档流，但是不会脱离文本流（文字、图片、表单元素不会被浮动元素覆盖，会围绕浮动的元素排列）

• 定位的元素既脱离文档流，又脱离文本流，可以实现元素之间真正的层级关系

脱离文档流的元素的特点

• float:left;

• float:right;

• position:absolute;

• position:fixed;

• 脱离文档流的元素不再区分行内或者块级，默认宽度都由内容撑开，都可以设置宽高及所有盒模型属性

多种透明

• transparent;全透明

• rgba(0,0,0,0.5); 兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。

• opacity:0.5; 元素整体透明（元素本身的颜色以及内部的所有内容都透明） 0 表示全透明 1表示不透明 0.X 半透明 ，兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。

• filter:alpha(opacity=50); IE浏览器专属透明滤镜

BFC (Block Formatting Context) 块级格式化上下文

• 什么是bfc？

• • Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了 其子标签如何定位，以及与其他标签的相互关系和作用。

  • BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

• 怎样生成BFC

• • 根标签

  • float的值不为none

  • overflow 的值不为 visible

  • display 的值为 inline-block

  • position 的值为 absolute 或 fixed

• BFC的特性

  • 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。

  • 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

  • BFC 的区域不会与 float 的标签区域重叠。(不包括固定定位方法)

  • 计算BFC的髙度时，浮动子标签也参与计算。

  • BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

• BFC解决的问题

• • 外边距塌陷

  • 清浮动

  • 两栏（浮动和转行内块）或者三栏自适应布局 （只能用overflow：hidden）