前端学习任务十

文档流的概念指什么？有哪种方式可以让元素脱离文档流?

• 文档流指窗体自上而下分成一行一行的形式，并且这一行行是从左到右的方式排放元素。
• 绝对定位和浮动可以让元素脱离文档流。

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

• 清除浮动指清除掉元素float属性
• 三种清除方式
• 添加新的元素并且clear：both（padding不会受到影响）
  HTML:

<div class="outer">   
 <div class="div1">1</div>    
<div class="div2">2</div>    
<div class="div3">3</div>    
<div class="clear"></div>//添加一个div
</div>

CSS:

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

• 父级div定义 overflow: auto（img{display: none}）
  HTML:

<div class="outer overflow"> //添加class=overflow   
  <div class="div1">1</div>    
  <div class="div2">2</div>    
  <div class="div3">3</div>   
</div> 

CSS:

.over-flow{overflow: auto; zoom: 1;} //zoom: 1; 是在处理兼容性问题

注意：overflow有三个值，auto;hidden;visible。visible无法清除浮动，hidden虽然可以清除浮动，但是对SEO不友好。

• :after 方法：（作用于浮动元素的父元素）

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

注意：

1. clear:both;指清除所有浮动，content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少；visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
2. 下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。

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

• static（默认）
  当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。
• relative（相对定位）
  元素框偏移某个距离（利用top,bottom,left,right）。元素仍保持其未定位前的形状，它原本所占的空间仍保留。（仍然在文档流中）。偏移的参考点是相对于自己本身原来的位置
• absolute（绝对定位）
  如果你想在一个文档(Document)中将一个元素放至指定位置，可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right定位。绝对定位会脱离文档流，该元素原来的空间会被占据。absolute定位的参照物是“上一个定位过的父元素(static不算)”。
• fixed
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。元素定位的参照物总是整个文档(viewport)
• sticky
  CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。（兼容性不好）

普通流与相对定位
CSS有三种基本的定位机制：普通流，相对定位和绝对定位
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变

普通流
<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> <div style="height: 100px; width: 100px; background-color: Red;"> </div> </div>

绝对定位与固定定位
相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样

绝对定位的元素的位置是相对于距离最近的非static祖先元素
位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位demo。

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index
属性控制叠放顺序，z-index越高，元素位置越靠上。

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

• z-index 属性设置元素的堆叠顺序。
• 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  注意：Z-index 仅能在定位元素上奏效（例如 position:absolute;）

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

• position:relative和负margin都是不脱离文档流，使得元素发生偏移，
• position:relative排列后不会对周围元素的排列发生影响，而负margin排列后会对文档流中的页面布局产生影响。前者无论如何定位，元素所占区域大小不变，而后者随着margin的值的变化，元素所占页面的区域也在变化。
• position:relative可以调整定位元素的z-index层级，而负margin不能；
• position：relative主要配合绝对定位对页面进行版块布局方面的定位，而负margin主要用于小的细节方面的位置调整。

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

• BFC的全称是 Block Format Content是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

• 当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

• 例子：触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄.

Paste_Image.png

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

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

![Uploading P[K785TQ9DZ2%3Y1X@68L]I_454154.png . . .]

• 外边距合并产生条件：
  （1）.相邻的外边距之间没有非空内容、padding或者border。
  （2）.元素都处于文档流中，即非浮动和position属性值不为absolute和fixed的元素。
  同时如果是元素是父子关系，子元素的padding和border并不能够消除合并现象。合并可以存在于兄弟对象之间，也可以存在于父子对象之间，

• 如何合并：具体查看w3c
  1.情况一：普通外边距合并 （注意：两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。）
  

  Paste_Image.png

2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
注意：如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。

Paste_Image.png

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

Paste_Image.png

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

Paste_Image.png

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

• 如何不让相邻元素外边距合并？给个父子外边距合并的范例
  • 父子元素之间的外边据合并
    方式一：给父元素加边框

Paste_Image.png

方式二：给父元素加padding

BAH63H%HGQKPYQIN(AH%SRC.png