- 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素可以左右移动，浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 如果父容器的子元素都是浮动元素，且没有定义高度，那么父容器会失去高度，在浮动元素之外-引起的父元素高度塌陷。
- 父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
- 浮动元素之后的普通元素因感知不到浮动元素的存在，而占据浮动元素原理的位置，导致被浮动元素覆盖。
- 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。
- 清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动是指清除浮动元素对当前元素的影响，如解决浮动父容器高度塌陷问题。
-
使用clear属性清除浮动
image.png -
使用clear解决父容器高度塌陷问题
image.png - 使用BFC清除浮动
- 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 定位方式 | 参考点 | 使用场景 |
|---|---|---|
| inherit | 从父元素继承position属性的值 | 一般不用 |
| static | 默认值，没有定位，元素出现在正常的流中 | 默认值 |
| relative | 相对定位，相对于元素在文档流中占据的原来空间 | 元素自身位置局部调整 |
| absolute | 绝对定位，相对于相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位 | 元素参照其他元素位置定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 | 固定小icon之类的位置 |
| sticky | 对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。 | 兼容性差，一般不用 |
- z-index 有什么作用? 如何使用?
z-index属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠上。属性值没有单位且可设置负数。 - position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative是指相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
- 负margin：除了让元素自身发生偏移还影响其它普通流中的元素。
- BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC全拼为Block Format Content 块级格式化上下文
- float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed - 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 相邻元素外边距合并：两个元素都设置外边距时，中间的外边距不会相加，而是选择外边距的最大值。利用BFC阻止外边距合并，使用float或者display:inline-block。
- 嵌套元素的外边距合并
阻止嵌套元素的外边距合并形成BFC可以阻止外边柜合并或者元素上加上border或者padding。 -
父子外边距合并
image.png
在父元素添加border或者padding解决。
