task10

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

特征： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动元素不在文档的普通流中，文档的普通流中的块框表现得就像浮动框不存在一样。

影响：
- 父容器：如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外。
- 其它浮动元素：浮动元素可以左右移动(根据float属性值而定)，直到它的外边缘碰到包含框或者另一个浮动元素的边缘
- 普通元素：浮动元素后面的普通元素的框会表现的像浮动元素不存在一样
- 文字：如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动元素不存在一样，但是框的文本内容会受到浮动元素的影响:文本内容会移动以留出浮动元素的空间(文档流中的元素的框无法感知浮动元素，但是普通元素内部的文本内容能感知到浮动元素)。

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

使用浮动元素可能会导致一些问题，比如文档流的元素中的文字会围绕浮动元素排列，比如由于容器内元素浮动，脱离了文档流，所以容器只剩下 边距的高度。为了解决这些问题，就需要清除浮动。

法1：针对文字包围浮动元素的情况，可以使用clear属性来清除浮动
法2：针对使用浮动元素后父容器出现的高度问题，可以使用BFC清理浮动或者为父容器添加一个空元素

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

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。

• static: 是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
• relative: 是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
• absolute:
• 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
• 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
• fixed: 它参照的坐标系是浏览器的窗口，固定定位的元素不随着页面滚动而移动，它会始终保持在那个位置。
• sticky:在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

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

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

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

position:relative;相对自己原本位置发生偏移，在文档流中仍占据原来的空间，不影响其它普通流中元素的位置。
负margin在改变自身位置的情况下，也会影响页面上其他元素的定位。

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

• 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
• 生成BFC：
  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)
• 作用：
• 防止垂直 margin 合并
• 清除内部浮动
• 自适应两栏布局 （BFC的区域不会与float box重叠）

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

• 当两个垂直外边距相遇时，它们就会合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当两个外边距都为负数时，取其绝对值的较大者，当两个外边距为一正一负时，取两者的和。

• 防止合并的方法：

• 生成BFC

• 加上border或者padding

canvas1.png

代码

alert

表单

模态框

导航栏

transform: translate(-50%,-50%);
cursor: pointer;
outline: none;
box-shadow叠加;

是块状元素，可以加边框看
div:after{content=‘’；clear:both;} 撑起高度
positon:absolute和relative