作业10 作业10

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

** 特征 **
1.浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
2.浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
3.浮动元素在一行排列，行类元素浮动后可以有块级元素的特性。
** 影响 **
1.对父容器的影响：如果父容器中的元素都是浮动元素，那么父容器会失去它的高度

文章图片
Paste_Image.png

2.对其他浮动元素的影响：如果父元素的宽度不够，父容器里的其他浮动元素会向下移动，直到位置足够放下。

文章图片
Paste_Image.png

3.文本内容却能察觉到浮动元素，呈现出围绕浮动元素排列的表现方式

文章图片
Paste_Image.png
4.如果浮动元素的高度不同，向下移动的元素就会被比它高的元素卡住

文章图片
Paste_Image.png

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

清除浮动指的清除浮动元素对当前元素的影响
** 方法一 **：
给父元素添加一个BFC去除浮动

文章图片
Paste_Image.png

【作业10】** 方法二 **
css中在父容器的最后添加一个:after

文章图片
Paste_Image.png

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

1.** 普通流默认定位方式 **：在普通流中元素框的位置由元素在html中的位置决定，元素position的属性为static或继承来的static就会按照普通流就行定位，这也是我们最常见的方式。
2.** 相对定位 **：元素的position值为relative，如果对一个元素进行相对定位它将出现在它所在的位置上，然后可以通过设置垂直水平位置，让这个元素相对于自己发生移动，在使用相对定位时无论元素是否移动，元素在文档流中只占据原来的空间，只是位置发生相对的移动。
3.** 绝对定位 **：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定

4.z-index 有什么作用? 如何使用? z-index属性用于设置元素的堆叠顺序，z-index可以取负值，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别 position:relative使元素偏移，不会影响到其他元素的布局，对于其他元素而言，相当于它自身所占位置没有发生变动一样
-margin来使元素发生位移的话，元素所占位置已经发生了改变，因此也会影响到处于文档流中的其他元素。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明块格式化上下文（block formatting context）是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。生成块格式化上下文满足以下条件即可：
根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
块元素具有overflow ，且值不是 visible
display: flow-root
特性：
内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦
然。
计算BFC的高度时，浮动元素也参与计算。
** 作用 **

解决外边距重叠问题
BFC不会重叠浮动元素
BFC可以包含浮动

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素、嵌套元素，只要他们之间没有阻隔(例如如边框，非空内容，padding等)就会发生margin重叠。
要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说意义不大，没有必要给它们加个外壳，但是对于嵌套元素就很有必要了，只要给父元素添加BFC就可以了，这样子元素的margin就不会和父元素的margin发生重叠了。

** 父子外边距合并范例 **(老子和儿子谁的margin大听谁的)

文章图片
Paste_Image.png

** 当父子外边距其中一个为负的时，此时的外边距等于父子元素相加 **

文章图片
Paste_Image.png
1.实现如下alert效果http://js.jirengu.com/cemaxaxenu/3/edit
2.实现如下表单效果 https://jsbin.com/runehakoyu/edit?html,css,output
3.实现如下模态框效果http://js.jirengu.com/zalomesetu/1/edit
4.实现如下导航栏效果https://jsbin.com/vulameyaso/1/edit?html,css,output