浮动定位BFC边距合并

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

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

• 对父容器的影响：当父容器里的子元素加了浮动以后，父元素就感知不到该子元素的存在，父容器的高度就会塌陷；

  
  eb50562be51ae255aac0ffbce0799bd.png

• 对其他浮动元素的影响:当浮动元素碰到另一个浮动的元素的边框，该浮动元素就会停止移动。

  
  8b31004a140cff930d0e4fabe1cc367.png

• 对普通元素的影响：当浮动元素遇到普通流元素，普通流元素表现得就像浮动元素不存在一样；

  
  d467c70c360f69b9f2c0c69bb8b2847.png

• 对文本的影响：文本会感知到浮动元素的存在，会移开给浮动元素留出空间；

  
  bfe0628d4c485b33dacefc3885d3038.png

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

• 清理浮动是指解决父容器高度塌陷的问题
  -如何清理浮动：1.使父容器形成BFC；
  2.clear:(left/right/both)属性;
  3.在父容器最后加上一个空的div;

• clear属性的例子：

  
  17923314e835a0bf743fd36a9eca55b.png

• 父元素设置BFC例子

  
  7f4b366d45fd6a372b2c34b93746887.png

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

• 相对定位：position:relative;相对元素本身位置进行定位； 参考点：元素本身位置 使用场景：当页面上的icon没有按照需求对其时，就可以设置一个position:relative;
• 绝对定位：position:absolute;相对于static定位以外的第一个祖先定位进行定位 参考点：绝对定位的元素是相对于距离最近的非static祖先元素决定的，如果没有已经定位的祖先元素，那么它的位置就相对于初始包含块html来决定 使用场景：首先检查父容器里面有没有定位元素，如果父元素里没有定位元素，则向父元素的父元素找查找定位元素，若还没有定位元素，则一直找到html的根节点，以父元素或html的跟节点位置进行偏移。
• 固定定位：position:fixed;在一个页面中，无论如何滚动页面，该页面的某个标题按钮一直保持不动； 参考点：相对于浏览器窗口进行定位；

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

• 通常情况下，HTML页面被认为是二维的，因为文本、图像和其他元素排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所以元素都知道其他元素所占用空间，Z-index属性可让你在渲染内容时调整对象分层的顺序；
• 在CSS2.1中，所以的盒模型元素都处于三维坐标系中，除了我们常用的横坐标和纵坐标，盒模型还可以沿着"Z轴"层叠摆放，当他们相互覆盖时，Z轴的顺序就十分重要了。这意味着CSS允许你在现有的渲染引擎上层叠的摆放盒模型元素，所以的层都可以用一个整数（Z轴顺序）来表明当前在Z轴的位置。数字越大，元素越靠近观察者，Z轴顺序由Z-index属性来指定。
• Z-index值较大的元素将层叠在Z-index值较小的元素之上。

Z-index只对定位元素有效（position:absolute/relative/fixed）的对象，用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果不是定位元素，对其设置Z-index是无效的。

• 2d47b4d3dc79722779a8f93458d651e.png
• aa9f74b8599ae5f811d817a7cfe15cf.png

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

• position:relative;对于文档中的普通流来说是不存在的；
• 负margin;对于文档的普通流来说，负margin是存在的，当负margin让某位元素移动的时候，挨着该元素的另一位元素也会跟着一起移动的。

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

• BFC：块级格式化上下文；
• 如何生成BFC:display:inline-block; display:absolute; display:fixed; display:float; display:table-cell; overflow:hidden; overflow:auto; overflow:scroll;都会建立一个新的块级格式化上下文；

• BFC会阻止垂直外边距(margin-top/margin-bottom)折叠；按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生BFC的重叠，这个包括相邻元素，嵌套元素，只要它们之间没有阻挡（例如边框，非空元素，padding等）就会发生margin的重叠，对于嵌套元素，只要把父容器设置为BFC,就可以阻止外边距合并了；对于相邻元素，只要把其中一个元素设置为BFC，就可以阻止外边距合并。
  

  阻止相邻元素合并： 30dd82fa67b2730e78edfcb3c126a5d.png
  8e450d374099b98c0d325f00612646a.png
  阻止嵌套元素合并： 2f889ad60664871f9af7ebbe8d838d9.png
  078a03a6294cb8982af62b0fce96ccd.png
  BFC可以包含浮动元素： dbf82b0f27110e9f03eca0db51375c4.png
  BFC不会重叠浮动元素：
  9afbfdc0c77d33cd742d27df343e426.png
  18e76e881b9c5eb70c8ea912a05cc98.png

7.

在什么情况下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
同属一个BFC的情况下会出现外边距合并,若是相邻的元素，则把其中一个元素设置为BFC;
若是嵌套元素，则需要把其父元素设置为BFC,就可以阻挡外边距合并。

4364704839e6469d5bd7097d94e45f8.png
c345d4ccda6f388fe37f9534c886feb.png
3a2a76c2052a82b4f2e3bcfbbf1a10e.png

1.实现如下alert效果,效果范例

• 作业

2. 实现如下表单效果,效果范例

• 作业
  3.实现如下模态框效果效果范例
• 作业
  4.实现如下导航栏效果效果范例
• 作业