任务10作业

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

特征: 浮动模型也是一种可视化格式模型,浮动的框可以左右移动（根据float熟悉性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通中的元素表现的就像浮动元素不存在一样。

• 对父容器的影响: 它不会超出父容器的边框,可能会使得它的父容器高度塌陷。
• 对其他浮动元素的影响: 可能会因为某个浮动元素的高度比较高，而被卡住。
• 对普通元素的影响: 普通元素会表现的像浮动元素不存在一样。
• 对文字的影响: 文字能够察觉到浮动元素，会围绕浮动元素。

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

• 清除浮动指解决浮动带来的一些问题。
• 如何清除浮动?
  • 1、 利用clear属性，清除浮动
  • 2、使父容器形成BFC
  • 3、没有副作用的方案，在内容最后，加上空内容。
    代码如下:

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

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

• 一般常用的是3种，即普通流，相对定位和绝对定位
  （1）static 默认值，在普通流中元素框的位置由元素在HTML中的位置决定。
  （2）relative 生成相对定位的元素，相对于元素本身正常位置进行定位，这个元素相对于它自己进行移动，元素在文档流中占据原来的空间，只是表现出来位置会改变，使用场景：就是想相对于自身移动下位置。
  （3）absolute 生成绝对定位的元素，绝对定位的元素的位置是相对于距离最近的非static祖先元素，如果 没有已定位的祖先元素，那么他的位置就相对于初始包含块html定位。使用场景: 就是想相对祖先元素，移动下位置。

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

作用：对于一个已经定位的元素（即position属性值是非static的元素）,z-index属性指定元素在当前堆叠上下文中的堆叠层级，z-index较大的元素会覆盖较小的一个。
举列说明

<div class="box1">dashed box
     <div class="box2"> yellow box</div>
     <div class="box3"> green box</div>
  </div>
------------------------------------------------------------------------------
.box1 {
  border: 3px dashed black;
  height: 100px;
}
.box2 {
  position: absolute;
  background: yellow;
  z-index: 1;
}
.box3 {
  position: absolute;
  background: green;
  z-index: 2;
}

如图

z-index12.png

如果我们此时将 .box2 里的z-index和.box3里的z-index颠倒一下，如下图：

z-index21.png

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

区别：用相对定位使元素位置发生偏移，元素占据的仍旧是原来的位置，只是表现出来的位置会发生改变。而用负margin,元素占据的不是原来的位置，而是占据的是使用负margin之后的位置。

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

• BFC是块级格式化上下文
• 如何生成BFC：只要给父元素加上一些属性值
  比如: overflow: auto;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  position: fixed;
  float: left;
  等等
• BFC的作用
  (1)阻止外边距的合并

<div class="ct">
   <h1>h1</h1>
</div>
----------------------
.ct {
  background: pink;
  margin: 10px;
  overflow: auto;   /*  或者是overflow: hidden; */
}
.ct > h1 {
  background: pink;
  margin: 40px;
}

如图 给父容器加auto或hidden.png

给父容器加auto或hidden.png

如果没有生成BFC的话，那么外边距将向较大的合并，即40px; 但是生成BFC之后，margin为两者之和即50px;
（2）BFC不会重叠浮动元素

<div class="ct">
   <div class="aside"></div>
    <div class="content">1、BFC会阻止垂直外边距折叠
 （1）按照BFC的定义，只有同属于一个BFC时，两个
元素才有可能发生垂直Margin的重叠，这个包括
相邻元素，嵌套元素，只要他们之间没有阻挡（边框，
非空内容，padding等）就会发生margin重叠
（2）因此要解决margin重叠问题，只要让它们不在
同一个BFC就行了，但是对于两个相邻元素来说，意义不大，
没有必要给它们加个外壳，但是对于嵌套元素来说就很有
必要了，只要把父元素设为BFC就可以了。这样子元素
的margin就不会和父元素的margin发生重叠了</div>
 </div>
--------------------------------
.ct {
   border: 1px solid black;
}
.aside {
  width: 50px;
  height: 50px;
  background: blue;
  float: left;
}
.content {
  background: yellow;
}

如图 重叠浮动元素.png

重叠浮动元素.png

下面我们给class为content的元素，添加样式 overflow: hidden;此时如图：

不重叠浮动元素.png
（3）BFC 可以包含浮动元素

<div class="ct">
    <div class="box"></div>
    <div class="box"></div>
  </div>
-----------------
.ct {
  background: blue;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

如图：

未给父容器创建BFC.png

可以观察到此时给父容器添加背景完全是没有效果的。因为父容器的高度为0;
下面我们给class为ct的这个元素添加样式display: inline-block;如图：

添加样式.png
此时就能够添加上背景了，即BFC包含浮动

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

• 块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是
  组合到其中的最大的外边距，这种行为称为外边距合并。
• 什么场景下会出现外边距合并？
  （1）相邻的兄弟姐妹元素
  合并两者中的最大者
  （2） 块级父元素与其第一个/最后一个子元素
  如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动 这四条属性(也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说“挨到了一起”。此时这个块级父元素和其第一个子元素就会发生上外边距
  合并的现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的,若块级父元素的margin-bottom与它的最后一个子元素margin-bottom
  之间没有父元素的border、padding、inline-content、height、min-height、max-height 分隔时，就会发生外边距合并现象。
  （3）空块元素
  如果存在一个空的块级元素，其border、padding、inline content、
  height、min-height 都不存在。那么此时它的上下边距中间
  将没有任何阻隔，此时它的上下外边距将会合并。合并到其中的最大者，当有负边距存在时，合并后的外边距将是最大正边距加上最小
  负边距。
• 如何不让相邻元素合并
  一般都是两个块状元素，那么为其中一个添加样式display: inline-block;
• 给父子外边距合并的范列

<div class="ct">
 <h1>h1</h1>
</div>
--------------------
.ct {
  background: pink;
}
.ct > h1 {
  background: #666;
  margin: 40px;
}

如图 :

未加margin.png

此时我们给class为ct的元素添加样式margin: 30px;
此时如图:

加上margin.png
我们可以发现元素并没有向下移动。即h1和它的父元素发生了外边距合并，合并为40px。

8、 代码

1、实现如下alert效果。
demo
源代码
2、实现如下表单效果。
demo
源代码
3、实现如下模态框效果。
demo
源代码
4、实现如下导航栏效果
demo
源代码