1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素特征：1、浮动的框可以根据float属性值左右移动，直到其边缘碰到包含框或者另一个浮动元素的框边缘；2、脱离了普通流并可视，但普通流中的文本和行内元素可感知浮动元素，会主动让位，环绕浮动元素。
- 对父容器：当子元素全部float时，会导致父容器高度塌陷（在没设置height的情况下），无法撑开。
- 其它浮动元素：当父容器宽度过小，无法容纳水平排列的浮动元素时，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素高度不同，那么向下移动的时候可能被卡住。
- 普通元素：普通元素（非float）表现得就像float元素不存在一样，占用位置；但浮动元素在表层，可视，会遮住普通元素。
- 文字：文字会感知浮动元素，主动让位，环绕float元素。
2、清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动，不是消除float元素，而是清除float元素带来的不利影响，只对清除的元素生效。
- 如何清除浮动：
1、添加一个空<div><div style="clear: both"></div>
2、BFC清理浮动。因为BFC可以包含浮动，将父容器形成一个BFC即可。
3、通用清理浮动方案
父元素:after{
content: '';
display: block;
clear: both;
}
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
属性position，可应用到所有元素，属性值有以下六种：
-
inherit，继承父元素position属性的值。 -
static，默认值，没有定位，元素出现在正常文档流中。 -
relative，相对定位，通过left、top以及bottom属性进行定位；参考点：元素本身正常位置，不脱离文档流，其它元素还在正常文档流中（坑不动）。使用场景：可用于设置position的祖先元素，或按定义调整元素位置。 -
absolute，绝对定位，通过left、top以及bottom属性进行定位；参考点：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，脱离文档流，对其它元素无影响，不占据文档流空间。使用场景：如导航栏的二级菜单，hover可现。 -
fixed，固定定位，通过left、top以及bottom属性进行定位；参考点：相对于浏览器窗口定位，脱离文档流，固定元素的包含块是一个视口。应用场景：如模态框效果。 -
sticky， CSS3新属性，表现类似position:relative和position:fixed的合体。兼容性不好，不推荐使用。
4、z-index 有什么作用? 如何使用?
通过对定位元素设置z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
5、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
-
position: relative，元素相对于自身位置发生偏移，不影响其他元素的位置，仍在正常文档流中。 -
margin：-px;，相对于父元素设置外边距，会影响其他元素的位置。
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC的全称是Block Format Context，即块级格式化上下文，是页面CSS视觉渲染的一部分，用于决定块级盒子的布局及浮动相互影响范围的一个区域。
- BFC的创建方法：
（1）根元素，或其它包含根元素的元素
（2）浮动（元素的float不为none）
（3）定位（元素的position为absolute或fixed）
（4）设置行内块级元素（display: inline-block）；
（5）表格单元格（display: table-cell）
（6）设置block boxes的overflow的值不为visible（overflow:hidden; scrou; auto）
（7）弹性盒子flex boxes（display: flex）
其中最常见的就是overflow:hidden,float:left/right,position: relative/absolute。 - BFC常见特性及作用
（1） BFC会阻止垂直外边距合并（相邻元素，嵌套元素）。
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
（2）BFC 不会重叠浮动元素。
让正常元素，与浮动元素不在重叠。因为正常元素中建立了一个新的BFC。
Paste_Image.png
Paste_Image.png
（3）BFC可以包含浮动。这一特性用来清除浮动。
Paste_Image.png
Paste_Image.png
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 在同一个BFC中，会出现外边距合并，三种合并方式（1）相邻元素，垂直外边距合并；（2）嵌套元素（父子之间），垂直外边距合并。（3）元素自身合并，一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
- 如何合并：（1）两个外边距都是正数，取两者之中的较大者；（2）两个外边距都是负数，取两者之间绝对值较大者；（3）当两个外边距一正一负时，取两者的和。
- 阻止外边距合并：生成BFC，使之不再一个BFC里。
- 父子外边距合并例子
对于嵌套元素的外边距合并，在父元素中形成BFC，或者父元素加padding或者border等填充内容。
Paste_Image.png
Paste_Image.png
Paste_Image.png
网友评论