csss的一些知识（三）

一，浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

1.特性：

• 浮动元素会脱离正常的文档流；
• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
• 浮动元素display的默认值为"block"

2.影响：

• 2.1、对其父元素的影响
  对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
• 2.2，对其兄弟元素（浮动）的影响
  同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
  反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
• 2.3、对其兄弟元素（非浮动）和其兄弟元素内部文字的影响
  如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
  如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。

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

• 清除浮动：解决浮动父容器高度塌陷问题
• 具体方法：
  1.为浮动元素的父容器定义 overflow: hidden | auto | scroll，让其父容器形成BFC，即可清除浮动影响。
  缺点：如果里面的内容溢出父容器，会造成其他影响。
  2.直接在父容器里面的最后位置添加一个空div，设置它的clear为both。
  缺点：如无必要，无增实体，增加了一个无意义的标签。
  3.使用after伪元素选择权，在父容器最后面添加一个display为block | table的元素，设置它的clear为both（通时在父容器上添加*zoom:1，这样可以兼容ie6~7;）是现在比较主流和通用的做法。

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

• relative：生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px；
  使用场景：不需要脱离正常文档流，并进行定位的元素。
• absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定；
  使用场景：需要脱离正常文档流，并进行定位的元素。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定；
  使用场景：始终出现在窗口某个位置的部分。
• inherit：规定应该从父元素继承 position 属性的值；
• absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定；

四，z-index 有什么作用? 如何使用?

• 作用：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远
• 使用：

...
.a{
  background:red;
  width:100px;
  height:100px;
}
.b{
  background:yellow;
  width:100px;
  height:100px;
  position:absolute;
  top:10px;
  left:10px;
  z-index:-1;
}
...
<div class="a">aaaa</div>
<div class="b">bbbb</div>
...

两个同级的div，给b块设置了绝对定位（z-index属性目前只有在position:relative、position:absolute和position:fixed参与的情况下才有作用，表示层级），本应覆盖a块，但是又给b块设置了z-index为-1，z-index为负数则表示离用户更远；

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

• position:relative：相对定位，偏移后元素未脱离文档流且所占的原始空间仍会被保留，不会对文档流造成偏移影响；
• 负margin：外边距，当外边距为负值的时候，元素也会进行偏移，不会脱离文档流，但是会影响文档流的位置，其他元素有可能也随之偏移，；

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

• BFC：即块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
• 如何让一个容器形成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的特性来解决容器塌陷的问题：

.box{
  border:4px solid;
  width:200px;
  overflow:hidden;   /*触发了BFC，解决了容器塌陷的问题*/
}
.a{
  width:100px;   
  height:100px;
  background:red;
  float:left; /*a块左浮动*/
}
.b{
  width:100px;
  height:100px;
  background:blue;
  float:right; /*b块右浮动*/
}
...
<div class="box">
      <div class="a">aaaa</div>
      <div class="b">bbbb</div>
    </div>
...

容器有个两个浮动块，这样会导致容器塌陷，为容器添加overflow：hidden，触发了BFC,解决了容器塌陷的问题；

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

1.在什么场景下会出现外边距合并？如何合并？给个父子外边距合并的范例：

• 一个BFC中的两个或多个毗邻（普通流）块元素垂直方向上的 margin；

正正

设置A块的下margin为20px，B块的上margin为20px，这个时候他们的外边距合并了，A、B两块之间的间距为20px（如果A块的下margin值和B块的上margin值不一样，中间的间距将会取两个margin值中的最大值）；

正负

设置A块的下margin为20px，设置B块的上margin为-10px，这个时候他们的外边距合并了，A、B两块之间的垂直间距为10px，A、B两块之间的间距距离是它们A块下margin，B块上margin值之和（如果这个和是负数的话，A块将被B块覆盖相应尺寸）；

负负

设置A块的下margin为-40px，设置B块的上margin为-10px，这个时候他们的外边距合并了，A块被B块覆盖了40px，A、B两块之间的重合高度是A块下margin，B块上margin值中的最小值；

• 块级父元素与其第一个/最后一个子元素也会发生素垂直方向上margin合并。

父子

将BOX块的上margin设置为10px，A块的上margin设置为30px，BOX块没有内边距和边框，这个时候他们的外边距合并了，BOX的实际上margin取决于BOX块和A块的上margin中的最大值。类似的，若块级父元素的 margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生 下外边距合并现象。

2.如何不让相邻元素外边距合并？

2.1.用非空内容、padding、border 或 clear 让它们分隔开来；
2.2.将它们其中一个设置为浮动元素、inline-block 元素或绝对定位元素的。