blog 浮动定位与BFC边距合并

浮动定位与BFC边距合并

Open yongheng2016 opened this issue 8 years ago • 0 comments

文档流顺序

层叠上下文

脱离文档流：

float
position: absolute
position: fixed

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征：首先脱离文档正常流，根据设置的浮动方式向左或向右浮动，直到遇所处容器的的边框或其它浮动元素。对父容器的影响：会使父容器高度塌陷；对其它浮动元素的影响：会阻止其它浮动元素继续移动；对普通元素的影响：普通元素就像感知不到浮动元素的存在，浮动元素会覆盖住普通元素；对文字的影响：文字能够感知到浮动元素，会环绕浮动元素按顺序显示；

2. 清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动：浮动会造成的父容器塌陷，造成页面布局破坏；因此通过清除浮动来解决；清除浮动方法：

给浮动元素最下方增加一个空元素或利用伪对象通过clear来清除浮动

http://js.jirengu.com/yaqixuvavu/1/edit?html,css,output

让父容器形成BFC(Block Formatting Context)，创建一个新的格式化上下文来清除浮动

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

`static`

释义：默认值，没有定位；元素处于正常文档流中（忽视top,right,bottom,left和z-index的声明）参考点：自己所处文档流中的位置；定位规则：按照html文档布局规则排序；使用场景：默认值；在不进行更改的情况下默认为static；

`relative`

释义：相对定位的元素。参考点：元素本身正常位置。定位方式：通过top,right,bottom,left实现定位；使用场景：层叠的卡片，微调icon位置

`absolute`

释义：绝对定位元素。 参考点： 1.top,right,bottom,left属性值为auto时：默认位置为最近的非static祖先元素的padding内侧； 2.设置top,right,bottom,left属性值后，参考的是非static祖先元素的border内侧；

定位方式：通过top,right,bottom,left实现定位；使用场景：弹窗卡片（固定宽高）的水平竖直居中。

`fixed`

释义：绝对定位元素；参考点：浏览器窗口；定位方式：top,left,bottom,left; 使用场景：网页的回到顶部图标、页面固定显示的菜单栏。

`inherit`

规定从父容器那里继承position属性；定位方式由继承来的定位方式决定；

`sticky`

css3新属性，表现为position:absolute和position:fixed的合体；兼容性较差； sticky不生效原因有：

父元素设置了overflow:hidden或者overflow:auto

未指定top、right、bottom、left4个值中的任意一个

父元素高度小于sticky定位的元素高度

sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

sticky属性仅在以下几个条件都满足时有效：

父元素不能overflow:hidden或者overflow:auto属性

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

另：<table>中的<thead> <tr>无法设置sticky，但<th>可以详情

4.z-index 有什么作用? 如何使用?

z-index 属性:指定了一个元素及其子元素的 z-order。当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个。用法：元素必须定位为非static元素后，才能正常使用z-index属性； 1.默认情况属性值为auto，此时不会创建新的本地堆叠上下文；堆叠层级和父元素堆叠层级相同； 2.当为其赋值为整数后；整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素会立即创建一个堆叠层级为0的本地堆叠层级上下文；此时子元素不会与父元素外边的元素进行层级对比。

(和定位相似，先找祖先元素的层叠上下文；这是判断他们是否在同一个层叠上下文的依据；不是根据是父元素还是子元素来判断 Note: 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于同一个层叠上下文（类似于同一个级别）。)

参考：（文档下方是这个系列的顺序链接）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative：移动后本身占据的位置还存在，也就是说对整个文档流的排序没有影响； margin：本质上就是挪动自己在文档流中的位置布局，其后面所有的元素也会因此而改变布局；

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC：全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。

BFC的生成：

  1.根元素或其它包含它的元素
  2.浮动 (元素的 float 不是 none)
  3.绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
  4.内联块 inline-blocks (元素具有 display: inline-block)
  5.表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  6.表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  7.块元素具有overflow ，且值不是 visible
     display: flow-root
  8.弹性盒 flex boxes (元素的display: flex或inline-flex)；
     但其中，最常见的就是overflow:hidden、float:left/right、position:absolute

但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。

作用效果：

  1.内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
  2.处于同一个BFC中的元素相互影响，可能会发生margin collapse；
  3.每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
  4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；（使元素不会与浮动元素发生重叠）
  5.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；（BFC可以闭合浮动）
  6.一个行内元素形成BFC后会有块级元素的特性（例：IE6、7居中，`{*display:inlien; *zoom:1;}`）

参考：http://www.cnblogs.com/Candybunny/p/6222939.html