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效果,效果范例
- 实现如下表单效果,效果范例
