问答
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
-
浮动元素脱离文档流，普通流中的块级元素感知不到浮动元素的存在;根据float属性值 左右移动，直到它的边缘碰到父元素包含框或者另外一个浮动元素的框的边缘才停止移动。
-
父容器：对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
-
其他浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，当空间不够的时候会被浮动元素卡住。
-
普通元素：普通元素无法感知到浮动元素，占据浮动元素所在的位置，但是普通元素处于浮动元素的下层。
-
文字：浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。
清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动：清除浮动指的是运用clear属性去解决浮动父容器高度塌陷的问题，clear属性规定元素的哪一侧不允许其他浮动元素。
- 在最后添加一个空div 应用样式 clear: both，对它清理。缺点就是添加了一个无意义的标签
- 通用清理浮动方案
方法1.
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}
方法2：
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- 用css有三种定位方式：普通流，相对定位和绝对定位
- 定位和使用场景
inherit从父元素继承position 属性的值。
static默认值，没有定位，元素出现在正常的流中。
relative生成相对定位，相对于自身的定位来进行移动，left:20px 占有原有的位子向左移动20px。
absolute生成绝对定位，相对于最近定位的父元素进行定位，不占有原有的位子
fixed生成绝对定位元素，相对于viewport进行定位。
stickycss3新特性，对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。
z-index 有什么作用? 如何使用?
- z-index用于控制BFC中元素的堆叠顺序，z-index数值越大元素位置越靠上
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative 相对元素自身偏移的时候，不脱离普通流，仍占据原有空间，不影响其它元素
- 负margin 元素自身偏移的时候，影响其它元素的位置也会相应改变。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC --（Block Format Content 块级格式化上下文）
- 如何生成 BFC？根元素、float属性不为none、position为absolute或fixed、display为inline-block, table-cell, table-caption, flex, inline-flex、overflow不为visible时元素会生成BFC
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠 ，BFC不会重叠浮动元素，BFC可以包含浮动
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
- 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
--1. 兄弟元素外边距合并 div1和div2的外边距就是20px
div1 {
width:100px;
height:100px;
marign:10px;
}
div2 {
width:100px;
height:100px;
margin:20px;
}
--2. 父子元素的外边距合并:如果父子元素之间没有padding和空白内容等时就会发生外边距合并。
.parent {
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
--3. 外边距自己和自己合并，如果一个元素没有边框和填充，但有上下外边距，这时它的上下外边距会合并。
网友评论