问答
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素有什么特征
float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。 - 对父容器的影响
如果父容器内的元素均为浮动元素，且父容器未设置height值，会出现父容器高度塌陷 - 对其他浮动元素的影响
同为float： left 或者 float： right的元素，会按照定义的先后顺序进行排列，一行内放不下时会另起一行继续排列；
如果给某个浮动元素设置了clear：left属性，则该元素左侧不允许有浮动元素，如果已经有浮动元素在该元素左侧，则该元素会换行，甚至可能出现被卡住的情况，clear：right及clear：both属性类似 - 对普通元素的影响；
普通元素会因为感知不到浮动元素的存在而占据浮动元素的位置，可能导致被覆盖； - 对文字的影响
普通元素感知不到浮动元素的存在，但普通元素内的文字会感知到浮动元素的存在从而避开浮动元素进行显示，会出现文字环绕的现象。
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动指什么
如果父容器内的元素均为浮动元素，且父容器未设置height值，会出现父容器高度塌陷，清理浮动其实指的时清除掉父容器高度塌陷的问题 - 如何清楚浮动
1 在父容器内添加空的标签，并对该空标签样式设置为clear：both，使该空标签左右均没有浮动元素，从而使该标签位置下移，以达到撑开父容器高度的目的
2 利用父容器的伪类选择器给该父容器添加一个空的内容，达到撑开父容器高度的目的，代码如下：
.父容器:after{
content:"";
display:block;
clear:both;
}
3 使父元素形成新的BFC以达到清楚浮动
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit：从父元素继承；
- static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
- relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
- absolute：绝对定位。相对于static定位意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
- fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
- sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。
4. z-index 有什么作用? 如何使用
z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：
- 元素在当前堆叠上下文中的堆叠层级。
- 元素是否创建一个新的本地堆叠上下文。
语法：
/* Keyword value */
z-index: auto;
/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
- auto
元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。 - <integer>
整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative使元素位置发生偏移时，只是改变了该元素的显示位置，并未改变该元素在文档流中本来的位置，会与其他元素产生视觉上的重叠现象；
- 负margin改变元素位置时同时改变该元素在文档流中的位置；
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
6.1 BFC 是什么
block formatting context，块级格式化上下文
6.2 如何生成 BFC
块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动 (元素的float不是 none)
- 绝对定位的元素 (元素具有position为 absolute 或 fixed)
- 内联块 inline-blocks (元素具有 display： inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性
) - 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 块元素具有overflow且值不是 visible
6.3 BFC 有什么作用
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
例子：
父子元素上下margin合并
父子元素上下margin未合并
- BFC不会重叠浮动元素
例子：
浮动元素重叠.png
浮动元素未重叠.png
- BFC可以包含浮动
例子：
父容器高度塌陷.png
高度被撑开.png
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
7.1 在什么场景下会出现外边距合并
- 兄弟元素同处于一个BFC时，会出现上下margin合并的现象
- 当父子元素中的父元素没有border或padding时，且父元素不是BFC时，父子元素的上下margin会出现合并
7.2 如何合并
合并后的margin值取值为所合并的两者中的大者
7.3 如何不让相邻元素外边距合并？
可以把相邻元素处于不同的BFC中从而阻止边距合并
例子.png
7.4 给个父子外边距合并的范例
请见6.3的第一个例子
网友评论