1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素display的默认值为"block"，浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 对父容器： 父容器并不能感知浮动元素的存在，当一个父容器所有的子元素都设置为浮动元素时，会造成父元素高度塌陷问题。
- 对其他浮动元素： 如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
- 对普通元素： 其他普通元素表现得浮动元素好像不存在一样，但是浮动元素会覆盖普通元素，可通过z-index来控制叠放顺序；
- 对文字：普通流中文本可以感知到浮动元素的存在，当产生堆叠的时候，文字会对浮动元素的外边框形成环绕效果；
2、清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动：解决父容器高度塌陷的问题；
清除浮动的方法：
1、在父容器里最后位置添加一个空div，设置它的clear为both。缺点是增加了一个无意义的标签。
2、 对父容器定义overflow为 hidden|auto|scroll来形成BFC达到“清浮动”效果。
3、通用的方法：在父容器中添加一个class=clearfix；
设置：
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式。
相对定位 relative：生成相对定位的元素，相对于元素本身正常位置进行定位,使用场景：不需要脱离正常文档流，并进行定位的元素。
image.png
absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定；
使用场景：需要脱离正常文档流，并进行定位的元素。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定；
使用场景：始终出现在窗口某个位置的部分。
inherit：规定应该从父元素继承 position 属性的值；
static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
4、z-index 有什么作用? 如何使用?
作用：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。z-index的值越大，越靠前，离用户更近。
image.png
image.png
在position:relative、position:absolute和position:fixed参与的情况下才有作用，表示层级。
上述只是z-index的简单用法，透明度也会影响堆叠顺序。
在未使用position进行定位时，设置一个小于1的opacity值，该层会覆盖其他层。
image.png
image.png
当设置position为absolute、fixed或relative时，对已经通过设置z-index的值改变出现顺序的元素，添加属性opacity值小于1，会对其产生影响。效果如下：
image.png
image.png
其原因与堆叠顺序有关，当一个元素位于HTML文档的最外层（<html>
元素） 或被定位了并且拥有一个z-index 值（不为auto） 以及被设置了opacity ，transforms , filters , css-regions , paged media 等属性。会产生新的层，从而影响堆叠顺序。
详细原理可参考：http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html
5、position:relative和负margin都可以使元素位置发生偏移,二者有什么区别?
position:relative：相对定位，偏移后元素未脱离文档流且所占的原始空间仍会被保留，不会对文档流造成偏移影响；
而负margin则是做整体的移位，不会脱离文档流，但是会影响文档流的位置，其他元素有可能也随之偏移。
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content 即块级格式化上下文。它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
生成BFC：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
BFC具有以下特性：
1、BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。
2、BFC不会重叠浮动元素。
3、BFC可以包含浮动
利用上述特性，BFC可以：
1、解决外边距合并的问题，让两个块级元素处于不同的BFC中。
2、解决父容器高度塌陷问题。
3、解决文字对浮动元素环绕的问题。
合并外边距
解决父容器高度塌陷
文字环绕
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
1、同属一个 BFC 时，两个元素有可能发生垂直外边距的合并。
2、块级父元素与其第一个/最后一个子元素也会发生素垂直方向上外边距合并。
当两个垂直外边距相遇时，它们将形成一个外边距。
两者都为正外边距，则结果取最大的外边距；
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
都是负外边距，取最小负边距。
阻止相邻元素外边距合并的方法是形成 BFC
阻止父子外边距合并的方法有：
给父元素加 border
给父元素加 padding
上下两个块级元素
image.png
此时上下两个块级元素的margin都是50px ，但实际显示它们之间的距离并不是100px，而是50px，外边距合并了。如果俩个外边距的值不一样，则显示较大值。
image.png
当出现负的margin时，如上图，上下margin的代数和为0，即边距合并为0.
2、父子元素的外边距合并。
image.png
image.png
可以看到，子元素和父元素的外边距合并了，并且大小取决于外边距大的。
不让相邻元素外边距合并：
让两个块级元素处于不同的BFC中；
image.png
给父元素加上边框
image.png
网友评论