浮动、定位
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离了普通文档流。
父元素将无视其浮动元素的高度，如果一个父元素中所有元素均为浮动。则父元素高度将变为0。
其他浮动元素与浮动元素将处于同一层面，在浮动时可能会因为不同的元素高度而卡主。
普通文档流中的元素将把浮动的元素当做不存在。但是框的文本内容会受到浮动元素的影响，会移动以留出空间，因而行框围绕浮动框。
文字在普通文档流中的元素中时。依旧可以感受到其附近或者上方是否有浮动元素。如有浮动元素，文字将自动避开浮动元素来显示。
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
在使用浮动时，通常会带来父元素塌缩或者覆盖住其他元素的现象，为了防止这些现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动有如下几种：
一、在父元素最后添加一个空的div并且css设置clear: both;。
二、使用
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit 继承父元素的position属性
- static 默认值，普通元素。并且忽略top、bottom、left、right或者z-index声明
- relative 生成相对定位。相对于元素本身正常位置进行位移。
- absolute 生成绝对定位。相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
- fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
- sticky CSS3新属性，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
4. z-index 有什么作用? 如何使用?
通过z-index属性控制元素叠放顺序，z-index设定的值越高，元素位置越靠上。
但是z-index仅在定位元素上有效。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative是相对于元素原本位置进行位移，并不会对文档流中其他元素的位置产生影响。
margin为正值时，可能会将元素在文档流中的大小改变，从而影响其他元素在文档流中的位置，而影响整个页面的布局。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content块级格式上下文。
BFC是一个独立的渲染区域，它规定了内部元素如何布局，并且与这个区域外部毫不相干。
BFC有如下特性：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动
其中可以通过第三点特性实现清除(包含)浮动。将父元素设置如下属性。 -
float为left|right -
overflow为hidden|auto|scroll -
display为table-cell|table-caption|inline-block -
position为absolute|fixed
均可形成BFC将浮动元素包裹进父元素，实现清除浮动的效果。
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 同一BFC中，当且仅当垂直方向上外边距直接接触的元素，就会产生外边距合并。
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 两个同级元素的外边距均为正值或均为负值时，两个外边距会合并显示为绝对值较大的外边距。
- 当两个元素的外边距一正一负时，外边距显示结果为两数值的和。
- 当一个元素包含在另一个元素中时（假设没有形成BFC），它们的上/下外边距也会发生合并。
- 当两个父子元素均设置了外边距后，两个外边距会合并显示为较大的外边距。
- 将相邻元素生成BFC即可阻止相邻元素外边距合并。
- 父子外边距合并同样可以通过生成BFC阻止外边距合并。
父元素外边距合并了
生成一个BFC使得父元素外边距显示出来
网友评论