任务10-常见布局问题

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

1.1 特征

1.1-1. 浮动模型也是可视化格式模型的一种，浮动的div可以左，右移动（主要看float的属性）一直浮动到包含框的边缘，非常重要的一点是，浮动元素不再普通的文档流中，所以也不会影响普通流中的元素，普通流中的元素看他像空气一样
1.1-2.如果包含块儿太窄，无法包含全部子元素，那么多出来的元素会被“挤”下去。如果浮动元素高度不同，那么被“挤下去”的时候会被卡住。

1.2.影响

1.2-1. 对于父容器而言，忽略浮动元素的存在，会让他导致高度塌陷。
1.2-2. 对子容器而言，如果多个子元素水平排列，同时宽度不够时，浮动的子元素会依次向下排列，如果高度不同，下移的时候可能会出现被卡住的情况。
1.2-3. 对于其他元素而言，浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
1.2-4. 对于文字来说，文字会围绕浮动元素排列（就像平时报纸里面的图文排列的文章感觉差不多）。

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

1. 清除浮动指的清除浮动元素对当前元素的影响；
2. 清除浮动的方法

//利用伪类
.clearfix:before,.clearfix:after{
content: " ";
display: block;
overflow: hidden;
clear: both;
}
//或者让父元素生成BFC
.father-wrap{
overflow: hidden;//生成bfc
}
```

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

1.有几种定位方式
共有5种他们是 postion: inherit|static|absolute|relative|fixed;
2.如何实现定位
2-1. inherit继承父容器的定位方式，父容器怎么定位的他们也就怎么定位。
2-2. static 这个是postion的默认值，基本不用
2-3. absolute 元素框从文档流完全脱离，如果设定绝对定位的子框的父级框设定了relative，那么子框就以这个有相对定位的父框为基准进行自身位置的偏移，如果父级没设relative，那就再找上级，如果都没有设定，那就以html（根节点）为基准进行自身位置的调整。
参考点：最近的非static定位的祖先容器
常见使用场景：元素垂直水平居中
2-4. relative 元素相对于自己原来所处位置进行一定距离的偏移，原本这个元素所占的空间依然被保留
参考：元素自己所在文档流中位置
常用场景：元素特殊位置的小位移，或者作为绝对定位的参考点
2-5. fixed 元素框的表现类似于 absolute，不过其包含块是视窗本身
参考点：浏览器窗口
常用场景：位置固定的弹窗，或者，返回顶部的按钮

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

z-index 的作用：
控制非文档流元素的叠放顺序，该属性值越高，元素位置越靠上。
使用方法：当元素设置为relative、absolute或fixed时，通过设置z-index：number； 决定叠放顺序，属性值越高，元素位置越靠上。
(注：当一个元素被设置了opacity，transforms, filters, css-regions, paged media等属性后就会有新的‘堆叠上下文’排序。)
讲解堆叠上下文的文章

文章片段引用

下面是同一层里面的堆叠顺序（从后到前）：
层的根元素
被定位了得元素并且z-index值为负，相同z-index的情况下，按照
HTML元素的书写顺序排列，下面相同。
没有被定位的元素
被定位的元素，并且z-index值为auto
被定位了的元素并且z-index值为正。

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

两者都可以发生偏移，区别分别为：
position:relative; 不会影响其他元素,显示位置发生变化，文档流位置不变
margin: 这里是负数 ;为负值时，会影响其他元素，显示位置和文档流位置均发生变化。

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

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

生成 BFC的方法：

1. float为 left|right
2. overflow为 hidden|auto|scroll
3. display为 table-cell|table-caption|inline-block
4. position为 absolute|fixed

它的作用：
设置父元素为BFC可以清除浮动，克制高度塌陷，举个列子

.father-box{
   width: 600px;
   border: 1px solid red;
   margin: 0 auto;
   overflow: hidden;  //生成bfc克制高度塌陷
}
.child-box{
  width: 200px;
  height: 200px;
  float: left;  //脱离文档流 会让父元素“无视”这个child-box的存在
  border: 5px solid yellow;
}

解决元素margin重叠问题，技巧就是给父元素生成bfc就可以了。
解决margin重叠问题

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

什么场景下会出现外边距合并:

1. 兄弟元素间的合并-场景：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并（就是上面元素的margin-botton与下面元素的margin-top的距离出现合并）

2. 父子元素间的合并-场景：当一个元素包含在另一个元素中时（父框没有如：边框、非空内容、padding等属性时）它们的上和/或下外边距也会发生合并。

如何合并

• 两个相邻的外边距都是正数时，合并结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，合并结果是两者绝对值的较大值。
• 两个外边距一正一负时，合并结果是两者的相加的和。

如何阻止合并

1. 垂直相邻元素外边距合并
   1.1 给元素设置浮动；
   1.2 设置其中一个元素display:inline-block；
   1.3 或使其父元素形成BFC可防止边距合并（如overflow:hidden）；

2. 父子元素外边距合并
   2.1 为父元素设置padding或border
   2.2 设置父元素为BFC

父子元素margin合并范例

范例

8. 代码题目展示

8.1 代码题-1
8.2 代码题-2
8.3 代码题-3
8.4 代码题-4