4.切图仔恐怖的回忆定位和浮动八股文

1.什么是标准流（Normal Flow)

• 默认情况下，元素都是按照normal flow（标准流、文档流）进行排布

  • 从左到右，从上到下顺序摆放好

  • 默认情况下，互相之间不会发生层叠现象

  • 

  • 正在标准流的话可以用margin、padding对元素进行定位

  • 但是有个缺点就是设置一个元素的margin或者padding，会影响到标准流其他元素的定位效果、还有一个缺点就是不便于实现元素层叠效果

2.讲讲元素的定位

• 定位的话可以实现标准流做不到的事情，比如把一个元素放在另一个元素的上面，or始终保持在浏览器视窗内的同一个位置；

• 定位的话属性是position，常用的取值有五个分别是

  • static：默认值，静态定位

    • 元素按照normal flow布局 就是标准流 然后他的top啊、bottom啊都没有任何效果

  • relative：相对定位

    • 元素按照normal flow布局，可以利用；top啊left这些进行定位，定位参照对象是元素自己原来的位置

  • absolute：绝对定位

    • 脱标，定位参照对象是最临近的定位祖先元素，这里是最邻近定位祖先元素，举个例子就是

       <div class="div">
              <div class="box"></div>
          </div>
          最临近的定位祖先元素，如果div设置了定位，box最邻近的定位祖先元素就是div，一般情况下会用父相子绝的一个策略

  • fixed：固定定位

    • 元素会脱标，就是脱离标准流，可以通过left那些进行定位，定位参照对象是视口 当画布滚动的时候，固定不动。

  • sticky：粘性定位 （与固定定位不同的是结合了相对定位和固定定位）

    • 这个是当到达阈值点的时候，就会变成固定定位or绝对定位

• 然后将position设置为绝对定位or固定定位的特点

  • 1.可以随意设置宽高，宽高默认的话是由内容决定的

  • 2.不再受标准流约束，不再严格区分块级、行内级、行内块级的很多特性会消失

  • 3.不会给父亲元素汇报宽高数据

  • 4.默认是按照标准流布局

  • 5.对于绝对定位元素来说

    • 定位参照对象的宽度 = left +right +margin-left + margin-right +绝对定位元素的实际占用的宽度

    • 高度同理

    • 如果希望绝对定位元素的宽高和定位参照对象一样的话，可以给定位元素设置left 0 right 0 margin 0 这个时候定位参照对象的宽度和绝对定位宽度一样。

    • 如果希望绝对定位在定位参照对象中居中显示的话，可以怎样设置

      • left、right、top、bottom都设为0，margin设为auto，自动分配。

    • 

3.讲一讲z-index属性

• z-index的属性是用来设置定位元素的一个层叠顺序的，仅对定位元素有效，取值可以是正or负or0

• 比较原则的话就是

  • 如果是兄弟关系的话，z-index越大，层叠越在上面

  • 如果不是兄弟关系的话

    • 各自从元素自己以及祖先元素中，找到最邻近的2个定位元素进行比较

    • 而且这两个定位元素必须设置了z-index的具体数值

4.讲一讲什么是浮动，以及浮动的规则

• float属性可以指定一个元素应沿着容器的左侧或右侧放置，允许文本和内联元素环绕他

• 绝对定位和浮动的话都可以让元素脱标，达到灵活布局的效果

• float常用取值有none、left、right

• 浮动的规则

  1. 元素一旦发生浮动，就会脱离标准流

     • 朝着左or右边方向移动，知道自己的边界紧贴着包含快，一般是父亲元素或者其他浮动元素的边界为止

     • 定位元素会层叠在浮动元素的上面。

     • 

  2. 如果元素是向左（右）浮动的时候，浮动元素的左（右）边界不能超出包含块的左（右）边界

     1. 

  3. 浮动元素之间不能层叠

     • 如果一个元素浮动，另一个元素已经在那个位置上了，后浮动的元素会紧贴着前一个浮动元素

     • 如果水平方向剩余的空间不够显示浮动元素，浮动会将向下浮动，知道有充足的空间为止

  4. 浮动元素不能与行内级内容层叠，行内级内容浮动将会被浮动元素推出

     • 比如行内级元素和行内块级元素

  5. 行内元素和行内块元素浮动后，其顶部将与所在行的顶部对齐

5.讲一讲浮动经典问题—高度塌陷问题

• 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

  • 父元素计算总高度的时候，就不会计算浮动子元素的高度，导致出现了高度塌陷问题

• 解决方案一般是清除浮动，让父亲元素计算总高度的时候，把浮动子元素的高度算进去

• 属性是clear，取值有四个

  • left：要求元素的顶部低于之前生成的所有左浮动元素的底部

  • right：要求元素的顶部低于之前生成的所有右浮动元素的底部

  • both：要求元素的顶部低于之前生成的所有浮动元素的底部

  • none：默认值，无特殊要求

• 清除浮动的方法有很多

  1. 给父亲元素设置固定的高度

     • 扩展性不好

  2. 在父亲元素最后增加一个空的块级盒子，并且让他设置clear：both

     • 会增加很多无意义的空标签，维护麻烦

     • 违反了结构与样式分离的一个原则

  3. 给父亲元素添加伪元素，这个是最常用的

  .clear_fix::after {
      content: "";
      clear: both;
      display: block;
​
      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }
​
    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }
​
开发中一般都是这个写法直接套用即可