1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动元素脱离了正常的文档流，使普通文档流的元素无法识别浮动元素，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 普通文档流中的行内框（如文本）能够感知到浮动元素的存在，能够实现简单的文字环绕效果，这也是浮动出现的本质。
- 浮动元素直到碰到它的包含框或另一个浮动框的边缘。
- 浮动元素具有BFC特性，如浮动元素间不会发生外边距重叠。
- 清理浮动后，该元素的边框与浮动元素的外边距相邻，即外边距可能在浮动框内。
- 浮动元素具有包裹性，在没有设置widh的情况下，宽度由内容撑开。
- 即使是inline元素，浮动后也能显示的设置宽高。
影响：
- 因为其不再普通文档流中， 能造成父元素“高度塌陷”。
- 其他浮动元素会"察觉"到浮动元素的存在按照从左到右的"正常文档流"排列。
- 普通元素会表现的像浮动元素不存在一样，不过行内框（如文本）能感知到。
- 行内框（如文本）会环绕浮动元素，实现文字环绕效果。
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指元素的侧边不允许出现浮动元素，从而使得浮动元素的不占据普通文档流空间的使得父元素的高度塌陷问题得到解决，主要通过clear属性实现。
方法：
1.使浮动元素的父元素具有BFC特性。
.clearfix {
*zoom:1; // 其中*为CSS hack，为了兼容IE6、7，使其haslayout
}
.clearfix:after {
content: "";
display: "block";
clear: both;
}
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 值 | 含义 |
|---|---|
| inherit | 从父元素继承position属性的值，一般不用。 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位，应用于对其自身进行细微调整。 |
| absolute | 生成绝对定位的元素，相对于非定位元素的第一个祖先元素进行定位，没有则相对于根元素，使用广泛。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。需要一直停留在窗口的元素，例如某些导航，一些广告弹窗。 |
| sticky | 新的css3属性，兼容性较差，一般用JS实现。它的表现类似position:relative和position:fixed的合体，目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 |
4. z-index 有什么作用? 如何使用?
参考深入理解CSS中的层叠上下文和层叠顺序，注意理解七阶层叠水平，层叠上下文，层叠顺序。
z-index与元素在Z轴方向上的显示有关。
当元素发生层叠的时候：
- 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
- 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
z-index与层叠上下文：
- z-index不为auto的定位元素会创建层叠上下文。
- 定位元素默认的
z-index: auto可以看成z-index: 0。只不过z-index: 0会创建层叠上下文。 - z-index层叠顺序的比较止步于父级层叠上下文。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative相对自己原本的位置偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC：块级格式化上下文（block formatting context），它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。
形成条件：
- 根元素
- float不为none
- position为absolute或fixed
- display为inline-block、table-cell、table-caption、flex、inline-flex
- overflow不为visible
特性及作用：
- BFC的区域不会与float box重叠。 （外部）
- BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素。
- BFC元素不会发生margin重叠。
- 能感知到浮动元素存在，计算BFC高度时，浮动元素也参与。可以利用其清理浮动。
可以利用BFC特性及display: table-cell的包裹性，天生无溢出特性，绝对宽度也能自适应，来实现两栏自适应布局：
.cell {
display: table-cell;
width: 2000px;
*display: inline-block; // 兼容IE6,7
*width: auto;
}
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
只有普通文档流中的块元素的垂直外边距才会发生外边距合并，行内框、浮动框、绝对定位框之间的外边距不会叠加。
如何合并：
- 两个margin都是正值的时候，取两者的最大值
- 两个margin都是负值的时候，取的是其中绝对值较大的，
- 有正有负时，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
不让相邻元素外边距合并方法：
- 利用 BFC会阻止垂直外边距折叠的特性，将对应元素转换为BFC来解决边距重叠。
- 在父元素中添加padding或border来将两个外边距分开，阻止父元素与子元素的外边距合并。
父子外边距合并的范例：
<div class="layout">
<div class="ct">
<div class="box"></div>
</div>
</div>
.layout {
border: 2px solid #000;
background-color: #f00;
}
.ct {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: #0f0;
}
.box {
width: 50px;
height: 50px;
margin-top: 50px;
background-color: #00f;
}
效果图
由图知：.ct的
margin-top: 20px;与.box的margin-top: 50px;上外边距合并后，表现出的上外边距为50px。
网友评论