1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离普通文档流，浮动元素能覆盖普通文档流，浮动样式可以应用在块级元素和行内元素上。不参与文档流中父容器高度的计算。
浮动元素向左向右浮动，遇到父容器的边框或者遇移动方向的浮动元素才停下。
父容器的的
浮动元素与普通文档流再表现上相互感觉不到对方的存在，互不干涉，不在一个层面
文本内容会受到浮动框的影响，给浮动元素留出空间，（浮动元素旁边的行框被缩短，行框围绕浮动框），文本能感受到浮动元素的存在，受浮动元素的排版影响，向下排列。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
clear：both; 清除指定元素左右任意一个或两边不出现（没有）浮动元素存在
在父元素中子元素的后面添加一个子元素，子元素不设置宽高，设置其属性clear： both;撑开父元素的高度。
在浮动元素的父容器设置其中一个属性，overflow:hidden; position: absolute; display: inline-height; 都可以创建BFC，
形成BFC后，BFC自带清除浮动的特性。父容器可以包含浮动元素。
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
position: static 默认定位方式。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
相当于普通文档流
relative 相对定位， 相对于自身元素在文档流中的位置的偏移 ，占据空间，外形位置发生移动，但是本身的位置一直不变。
icon 图标没有调好位置，对齐，用相对定位调位置
absolute; 绝对定位， 相对于与元素最相近的定位的（static以外的）父祖先元素的位置
应用于打开网站时的弹窗
fixed 固定定位，相对于浏览器窗口定位，在一个位置保持不变
场景： 网站的top到顶端按钮 位置固定不变
4.z-index 有什么作用? 如何使用?
控制元素层叠顺序，z-index解决重叠时的显示次序问题
所有的层都可以用一个整数(z轴顺序)来表明当前层在z轴的位置。 数字越大， 元素越接近观察者。Z轴顺序用CSS的[z-index]属性来指定。
使用z-index很简单： 给它指定一个整数值即可。
其他注意问题：
只限于定位元素以及flex盒子的孩子元素；Z轴，用户观察屏幕的垂直角度，应该是 识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
参考文献 http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/33/
千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。
Paste_Image.png
如图所示：就能发现为什么内联元素的层叠顺序要比浮动元素和块状元素都高？？？
诸如border/background一般为装饰属性，而浮动和块状元素一般用作布局，而内联元素都是内容。网页中最重要的是什么？当然是内容了
Paste_Image.png
z-index一旦变成数值，哪怕是0，都会创建一个层叠上下文。
层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：
（1）谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
在CSS和HTML领域，只要元素发生了重叠，都离不开上面这两个黄金准则。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
relative 相对定位 是位置与自身之前的位置发生变化，占据之前的位置，文档流不会有影响，不影响其他的相邻元素的位置，可能会与其他元素重叠覆盖。
负margin 也会使元素位置偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC(Block Format Contet)块级格式化上下文。块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
生成BFC
overflow: hidden;
display: inline-height;
display: table-cell;
positon: absolute;或者是fixed
float: left;
BFC的作用
1.BFC会阻止垂直外边距margin-top和magin-bottom 的折叠。
文档流在一般情况下容易合并元素的垂直边距或者父子外边距合并，有时候合并的效果并不是我们想要的，为了恢复之前的样式，可以创建BFC，BFC 可以阻止折叠。
- BFC不会重叠浮动元素
浮动元素覆盖普通文档流，文本会感受到浮动框的存在，会留出浮动框的空间，得到文本围绕浮动框的效果。为了使文本和浮动元素不重叠，使用BFC. - BFC可以包含浮动
浮动元素脱离文档流，父容器不包含浮动元素，也感受不到他的存在，将父容器创建成BFC , 就可以包含浮动。
注意事项：块格式化上下文对于定位（float）和清除浮动 (clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
两个垂直相邻的块级元素外边距合并
或者是父容器的外边距与第一个（最后一个）子元素的外边距合并
垂直元素的外边距之间合并，取两者外边距值间的较大者。
父子元素之间的合并，当父元素中没有出现padding 、border、 overflow值时，会取较大值作为父元素的外边距，
补充：
负margin：
两个相邻的外边距都是负数时，合并结果是两者绝对值的较大值。
两个外边距一正一负时，合并结果是两者的相加的和。
不让相邻元素外边距合并：
父元素中有padding border overflow 属性的设置，则阻断合并，子元素的外边距为自身边距的值，父元素也是自己本身的边距值
范例：https://jsbin.com/vakabibebe/edit?html,css,output
*{
margin: 0;
padding: 0;
}
.box{
background-color: yellow;
margin: 20px 0;
}
.box11{
width: 100px;
height: 200px;
margin: 30px 30px;
background: red;
}
1 alert弹窗的效果
https://jsbin.com/tubomuhosu/edit?html,css,output
2 表单效果
https://jsbin.com/haciyodivu/edit?html,css
3 模态框效果
https://jsbin.com/gubitapayo/edit?html,css
网友评论