一 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
-
特征：使元素脱离文档流，左右浮动，文档流中的元素感觉不到浮动元素。
-
影响
对父容器来说，脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法由浮动元素撑开，父容器会失去高度。
其它浮动元素都根据左右浮动，显示在一排。
普通元素会被遮档，如文档流中文字图片内容与浮动元素所占用区域重合，文字内容会被挤开。也就是文字环绕图片这种形势。
二 清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动，浮动元素还是浮动，只是清除浮动带来的副作用。
- 在父元素的子元素的最后添加一个没有高度的空的块标签，并且设置属性 clear:both;
2.在父元素上添加after伪类
.container:after{
content: "";
display: block;
clear: both/;
}
3.让父元素也浮动起来。
三 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
-
inherit 从父元素继承 position 属性的值
-
static 默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
-
relative 相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。
使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
4.absolute 绝对定位。相对于static定位以外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。
使用场景：当想让元素参照特定参照物进行定位时使用。
-
fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
-
sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。兼容性不佳，不常用。
四 z-index 有什么作用? 如何使用?
-
当页面上出现多个由绝对定位或固定定位所产生的浮动层时，这些浮动层的位置就由z-index来决定，数值越大，越在上面。
-
使用条件： 当元素被定位时（absolute，relative，fixed），z-index才生效。
-
层叠上下文的7种层叠等级
- 背景和边框
- 负z-index值
- 块级盒
- 浮动盒
- 行内盒
- z-index：0
- 正z-index值
五 position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
-
position:relative，元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
-
margin，元素在文档流中位置发生了变化，影响后面元素在文档流中的布局。
六 BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括哪些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。
七 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
外边距合并指的是，当两个垂直外边距相遇时，即当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
-
合并规则
-
两个margin都是正值的时候，取两者的最大值
-
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移
-
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加
-
所有毗邻的margin要一起参与运算，不能分步进行
- 如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
- 形成BFC 可以阻止外边柜合并，如上一题的给元素添加浮动，绝对定位，inline-block；父子元素情况下，给父元素添加overflow不为none也可以阻止。
网友评论