问答

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

• 浮动元素可以依据 float 属性值左右移动，直到其外边缘碰到其父容器的框边缘或者另一个浮动元素的框边缘；浮动元素不在文档的普通流中。

• 对父容器：浮动元素不会影响父容器的高度，根据自身 float 属性在父容器规定的宽度下进行排列；如果父容器宽度不足以容纳下所有浮动元素的宽度，则浮动元素自动被挤到下方。

• 对普通元素：普通元素会自动忽略浮动元素的存在，仿佛在这个位置没有任何元素一样，该位置的普通元素在视觉上将会被浮动元素所覆盖，但是普通元素内的文本元素等不会被覆盖，会自动绕过浮动元素所在的区域进行显示。

• 对文字：文本元素不会忽略浮动元素的存在，会自动绕过浮动元素所覆盖的位置进行显示。

---

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

• 清除浮动为了解决父元素高度坍塌问题：如果父元素下有浮动子元素，浮动子元素脱离文档流，父元素无法感知其容量，无法被这些浮动子元素撑开（这些浮动子元素对父元素高度不会产生影响，父容器的高度也不会完全覆盖这些浮动子元素），从而可能导致视觉上的的混乱状况，无法区分父子元素，因而要通过清除浮动的方式来解决这些出现的问题。

• 清除浮动的方法：

1. 利用 clear 属性，清除浮动

在父容器的子元素最后添加一个 <div style="clear:both;"></div> 空标签；
也可以在父容器的子元素最后添加一个<br style="clear: both;"> 标签来清理浮动；

2. 使父容器形成 BFC

/*方法1*/
.clearfix{
    *zoom:1;
    /*触发 IE67 Layout 属性达到类似 BFC 的效果，经常也不用写*/
}
.clearfix:after{
    content:"";
    display:block;
    clear:left;
}
/*方法2*/
.clearfix{
  *zoom:1;
}
.clearfix:after{
  content:"";
    display:table;
    clear:both;
} 

---

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

值	属性
inherit	规定应该从父元素继承 position 属性的值
static	默认值，没有定位，元素出现在正常的流中
	（忽略 top, bottom, left, right 或者 z-index 声明）
relative	生成相对定位的元素，相对于元素本身正常位置进行定位，
	left:20px 会向元素的 left 位置添加20px
absolute	生成绝对定位的元素，
	相对于static定位以外的第一个祖先元素（offset parent）进行定位,
	元素的位置通过 left, top, right 以及 bottom 属性进行规定
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。
	元素的位置通过 left, top, right 以及 bottom 属性进行规定
sticky	CSS3新属性，表现类似position:relative和position:fixed的合体，
	在目标区域在屏幕中可见时，它的行为就像position:relative;
	而当页面滚动超出目标区域时，它的表现就像position:fixed，
	它会固定在目标位置

• 主要定位元素：relative/absolute/fixed（只有这三个属性下才可以设置 top/right/bottom/left）

---

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

使用定位元素的时候，文档流和文本会彻底忽视其内容的存在，此时会导致一些内容相互覆盖问题，利用 z-index 来决定绝对定位元素是否位于最上方。

对定位元素进行设定 z-index: 1; 设定堆叠顺序最高者位于最前面。

---

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

position:relative; 会使得元素相对于自身原有的位置偏移，但是依然占据原有的位置空间，不会影响到周围元素，不会改变原有的文档流。

负 margin：会使得元素相对于自身原有位置便宜，但是不再占有原有的位置空间，此时周围元素很多都会跟随该元素做出位置变化，会改变原有的文档流。

position: relative;:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<style>
    .box1 {
        width: 50px;
        height: 50px;
        border:1px solid black;
    }
    .box2 {
        width: 50px;
        height: 50px;
        border:1px solid red;
    }
    .box3 {
        width: 50px;
        height: 50px;
        border:1px solid blue;
    }
    .box2 {
        position: relative;
        top: 40px;
    }
</style>

负 margin:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<style>
    .box1 {
        width: 50px;
        height: 50px;
        border:1px solid black;
    }
    .box2 {
        width: 50px;
        height: 50px;
        border:1px solid red;
    }
    .box3 {
        width: 50px;
        height: 50px;
        border:1px solid blue;
    }
    .box2 {

        position:relative;
        /*元素自身会移动，但文档流不会发生改变*/
         margin-top: 40px;
        /*负 margin 文档流位置会发生移动*/
    }
</style>

---

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

BFC 是什么？

• BFC 全称是 Block Format Context （块级格式化上下文）

• BFC 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

---

如何生成 BFC ？

设置如下

• float为 left | right
• overflow为 hidden | auto | scroll
• display为 table-cell | table-caption | inline-block
• position为 absolute | fixed

BFC 有什么作用？

• BFC 会阻止垂直外边距（margin-top、margin-bottom）折叠

• • 按照 BFC 的定义，只有同属于一个 BFC 时，两个元素才有可能发生垂直 Margin 的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding 等)就会发生 margin 重叠。
• • 因此要解决 margin 重叠问题，只要让它们不在同一个 BFC 就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为 BFC 就可以了。这样子元素的 margin 就不会和父元素的 margin 发生重叠

• BFC 不会重叠浮动元素

• BFC 可以包含浮动

我们可以利用 BFC 的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成 BFC 就可以，简单看看如何形成 BFC

---

问题7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距合并指的是，两个垂直外边距相遇时，它们将构成一个外边距，合并后的外边距高度等于两个发生合并的外边距中的高度较大者。

1. 两个相邻元素在垂直方向上合并外边距，取较大值进行合并：

<div class="ct">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

<style>
    .box1{
        width: 100px;
        height: 100px;
        margin-bottom: 50px;
        border: 1px solid blue;
    }

    .box2 {
        width: 100px;
        height: 100px;
        margin-top: 20px;
        border: 1px solid blue;
    }
</style>

此时下边框 box2 的margin-top: 20px;会合并到上边框 box1 的margin-bottom:50px;的50px 中。

2. 父子元素间没有阻挡（边框、padding、非空内容）时会发生上边距或下边距合并：

<div class="ct">
    <div class="box"></div>
</div>

<style>
    .ct {
        width: 200px;
        background: pink;
        /*padding: 1px;*/
        /*border: 1px solid;*/
        
    }

    .box {
        width: 100px;
        height: 100px;
        margin-top: 30px;
        background: yellow;
    }
</style>

3. 外边距自己和自己合并，如果一个元素没有边框和填充，有上下边距，此时它的上下外边距会合并：

<div class="ct1"></div>

<style>
    .ct1 {
        margin-top:50px;
        margin-bottom:100px;
    }
</style>

---

代码

代码题1

代码题2

代码题3

代码题4