CSS可视化格式模型

1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

• 浮动元素不占据文档流，浮动框可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边缘，
• 对父容器的影响：由于浮动元素不占据文档流，易导致父容器塌陷。

image.png

• 对其他浮动元素：
  1、没有足够的水平空间，浮动框向下移动，直到有足够空间的地方
  2、如果浮动元素的高度不同，那么当它向下移动时可能会被其他浮动元素“卡住”。
• 对普通元素：由于浮动不占据文档流，因此普通元素会忽视浮动元素的存在，也会形成浮动元素“遮挡”普通元素的现象
• 对文字：普通流中的文字会感知浮动元素的存在，形成文本环绕浮动框的现象

2、清除浮动指什么? 如何清除浮动? 两种以上方法

• 清除浮动是指清除浮动后造成父容器坍塌的现象，让父容器再次包含浮动元素
  方法1：在浮动元素下添加一个空元素并清除它

image.png

方法2：浮动父容器（副作用在于下一个元素会受到浮动当前浮动父容器的影响）

image.png

方法3、利用CSS中的伪类：after和内容声明在指定的现有内容的末尾添加新的内容（通用型处理方法，无副作用）

image.png

3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

定位方式：相对定位、绝对定位、固定定位

• 相对定位（可看作普通流定位模型的一部分）：通过设置垂直或者水平的位置，让元素“相对于”它的起点移动，参考点为该元素原来占有的起点；当使用相对定位的时候，无论是否移动，元素依旧占据原来的空间

• 绝对定位:绝对定位使元素的位置与普通文档流无关，因此不占据空间，其参考点是相对于距离离它最近的那个已经定位（relative、absolute、fixed）的祖先元素确定的，若祖先元素无定位，则相对其其实包含块定位（HTML元素）

• 固定定位：固定定位可看作是绝对定位的一种，其参考点是浏览器的视口（viewport）

4、 z-index 有什么作用? 如何使用?

z-index属性是控制框的叠放次序，z-index的值越大，框在栈中的位置就越高。

5、 position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

可以，使用position:relative元素依旧占据原来的空间，未脱离文档流，不影响其他元素的位置；使用负margin使元素脱离了原来文档流，会影响下一个元素的位置

6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 如何形成BFC ：一个元素内，运用overflow:auto/hidden/scroll absolute、fixed、float、inline-block这些CSS样式的时候，可以创建一个新的格式化上下文。
• BFC可以清除浮动（给浮动元素的父级加绝对定位或浮动样式都可以达到清除浮动的作用）；BFC可以阻止margin合并。

7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

• 外边距合并：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
• 如何合并：当两个或者更多垂直的外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生外边距合并中的外边距的高度中的较大者
  1、相邻元素合并

合并后的外边距为100px

2、父子外边距合并

元素的顶外边距和父元素的顶外边距发生合并 image.png

3、空元素自身的顶外边距和底外边距合并

顶外边距和底外边距合并

• 如何不让外边距合并(以父子外边距合并为例)：
  1、使用border给父元素加一道界限

image.png

2、使用内边距给父元素加一道界限

image.png

3、使用BFC的特性使两个元素独立开来（增加一条无形的界限）

image.png