入门任务10 修改

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

浮动元素的特征：

1. 不占据普通文档流的空间。
2. 浮动元素的左（右）外边界不能超过其包含块的左（右）内边界。
3. 浮动元素的左（右）外边界必须是源文档中之前出现的左浮动（右浮动）的元素的右（左）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
4. 左浮动元素的右外边界不会在其右边浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
5. 一个浮动元素的顶端不能比其父元素的内顶端更高。
6. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
7. 如果文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成的框的任何行框的顶端更高。
8. 如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，这个浮动元素会向下浮动到之前浮动元素下面的某一点。
9. 浮动元素必须尽可能高地放置。
10. 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。
11. inline元素设置浮动，改变inline的display使得它像个block-level。
12. 在重叠上，浮动元素会遮盖block-level元素的背景，不会遮盖inline元素。
    注意：内边界：指盒模型中的content边界。 外边界：指盒模型中的margin边界。

影响：
1.非BFC的正常文档流父元素会"感受"不到浮动元素的存在，从而产生"高度塌陷"。
2.其他浮动元素会"察觉"到浮动元素的存在按照从左到右的"正常文档流"排列。
3.普通元素(非inline-level)会无视浮动元素的存在,从而占据浮动元素的"原来的位置"。
4.文字(也既inline-level)级的元素会环绕浮动元素，表现的像是察觉到浮动元素一样。

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

- inherit

从父元素继承position属性的值
一般不用

- static默认值

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

- relative

生成相对定位的元素，相对于元素本身正常位置进行定位
属性值：left, top,right ,bottom
应用于对其自身进行细微调整

- absolute

生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位
属性值：left, top,right ,bottom

- fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
属性值：left, top,right ,bottom
需要一直停留在窗口的元素，例如

- sticky

兼容性较差，一般用JS实现
新的css3属性，它的表现类似position:relative和position:fixed的合体，目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
注意:如果同时定义了left和right值，且width和height有值，那么left生效，right无效，同样，同时定义了top和bottom，top生效。

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

z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。
z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。
Z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。

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

外边距合并出现的三个场景。

1.同一个BFC，且同处于普通流中的垂直相邻元素外边距合并。
2.父子元素的外边距合并。
3.空元素的外边距合并。

合并规则：

1.两个margin都是正值的时候，取两者的最大值；
2.当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3.当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4.所有毗邻的margin要一起参与运算，不能分步进行。

不让相邻元素外边距合并的方法：

1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或一个BFC中。
3.margin在垂直方向上不毗邻。

总结：

1.这些margin都处于普通流中，并在同一个BFC中；
2.这些margin没有被非空内容、padding、border 或 clear 分隔开；
3.这些margin在垂直方向上是毗邻的，包括以下几种情况：

• 一个box的top margin与第一个子box的top margin
• 一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
• 一个box的bottom margin与紧接着的下一个box的top margin
• 一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子元素。

4.例外的情况
根元素的外边距不会参与折叠
不设置任何属性的空span和空div不影响任何布局，可以无视之。