浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征： 元素浮动会脱离标准文档流。
对父容器： 在父容器高度自适应的情况下，所有元素浮动后父元素会塌陷，高度为0。
对其他浮动元素： 当页面有多个浮动元素时，其中一个浮动元素会移动到直到父元素的边框或者碰到另一个浮动元素才停止，如果父容器的大小不够容纳多个浮动元素，浮动元素会被挤下去继续向一个方向浮动。
对普通元素： 因为浮动元素脱离了标准文档流，普通元素表现的就好像浮动元素不存在一样，继续按照标准文档流排列。
对文字： 文字将环绕在浮动元素的周围。
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是为了解决一系列由于浮动出现的排版问题
方法
- clearfix
浮动元素的父元素添加clearfix类
<pre>
.clearfix {
*zoom: 1; //兼容ie
}
.clearfix:after {
content:"";
display: block;
clear: both;
}
</pre>
2.使父容器形成BFC
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit，子元素的定位方式继承于父元素
- static，默认的定位方式，处于标准文档流，设置top，left，right，bottom均无效
- relative，相对定位，不脱离标准文档流，设置top等属性时，发生偏移，但仍然在文档流中占据位置
- absolute，绝对定位，脱离标准文档流，设置top等属性时，发生偏移，不在文档流中占据位置
- fixed，固定定位，脱离标准文档流，当设置为fixed时，块就像“粘”在屏幕上一样，不随着页面的滚动改变当前的位置
- sticky，对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed
z-index 有什么作用? 如何使用?
z-index用于当多个脱离文档流的元素重叠在一起时，通过设置z-index来优先显示最上面的元素，z-index值越大，当前元素在越上面
eg: z-index: 100;
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative和负margin都不会脱离文档流，但是前者不会影响浏览器中的其他元素，后者会影响其他元素；前者在移动过程中，自身的位置不会发生变化，后者在移动的过程中，自身的位置发生变化
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC指的是块级格式化上下文
| 形BFC的方法 | 样式 |
|---|---|
| display | inline-block或者table-cell或者table-caption |
| float | 不为none |
| position | absolute或者fixed |
| overflow | 不为visible |
BFC作用:
1.BFC会阻止垂直外边距重叠
2.BFC不会重叠浮动元素
3.BFC可以包含浮动
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
出现外边距合并的情况有两种
- 垂直方向上的外边距合并
当两个块级元素设置margin-top和margin-bottom时，会发生外边距合并，合并之后的外边距大小是原来两个元素中外边距大的那个，例子：
Paste_Image.png
如果margin为负值，则计算两者相加后的数值进行移动
2.父元素嵌套子元素，子元素的margin-top移动到父元素上，例子：
Paste_Image.png
解决方法：为容器添加padding，border或者给父元素设置BFC即可，效果如下：
Paste_Image.png
网友评论