1.浮动元素有什么特征？对父容器，其他浮动元素，普通元素，文字分别有什么影响？
特征：元素脱离文档流，按照指定方向发生移动(根据float属性值而定)，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘，普通流中的元素表现的就像浮动元素不存在一样。
父容器影响：浮动元素脱离文档流向左右移动，直到边框碰到父元素的边缘，就会发生父元素高度塌陷问题。
其他浮动元素影响：父容器宽度能够容纳所有浮动元素，就会水平排列；超出父容器宽度的其他浮动元素就会向下移动，直到有足够空间；如果浮动元素高度不同，那么向下移动的时候就会卡住。
普通元素影响：浮动元素之前的普通元素不受影响，浮动元素之后的普通元素因感知不到浮动元素的存在而被浮动元素覆盖。
文字影响：文字所在的行框因为浮动元素的挤压而缩短，从而围绕浮动元素排列。
2.清除浮动指什么？如何清除浮动？两种以上方法
清除浮动指：浮动元素脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法被浮动元素撑开。就发生了父容器高度塌陷问题
清除浮动元素方法
(1)在父元素的子元素的的最后添加一个没有高度的块级元素的标签，设置属性clear: both;清除浮动，还可以撑开父元素
(2)after伪类清除浮动 （解决浏览器兼容问题）
.clearfix{
*zoom: 1;
}
.clearfix{
content: " ";
display: block; //display: table;
clear: both;
}
(3)使父容器形成BFC
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。可以对父元素设定以下样式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
有6种定位方式
inherit：从父元素继承position的值
static：默认值，没有定位，元素出现在正常流中
relative：相对定位，相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。
absolute：绝对定位，相对于static定位以外的第一个父元素进行定位，如果没有已定位的父元素则以html标签为参考进行定位。
fixed：固定定位，相对于浏览器窗口进行定位。
sticky：表现类似position: relative和position: fixed的合体，目标区域在屏幕中可见时，它的行为就像是position: relative；当页面滚动超过屏幕时，它的行为就像是position: fixed，它会固定在目标位置。
4.z-index有什么作用？如何使用？
因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其他元素，可以给z-index设置属性值来控制叠放顺序，z-index越高，元素位置越靠上。
5.position: relative和负margin都可以使元素位置发生偏移？二者有什么区别
posotion: relative 只相对于自己原本位置发生偏移，不影响其他普通流中元素的位置。
负margin 除了让元素自身发生偏移还会影响其他普通流中的元素
6.BFC是什么？如何生成BFC？BFC有什么作用？举例说明
BFC(Block Format Content)
BFC的生成方法
float: left|right
overflow: auto|hidden|scroll
display: inline-block|table-cell|table-caption
position: absolute|fixed
作用
(1)解决margin重叠问题，margin重叠是指处于同一个BFC中的相邻元素，嵌套元素，只要他们之间没有阻挡(例如padding、border、文字)就会margin重叠，这是只要让其中一个元素形成新的BFC就解决margin重叠问题。
(2)清除浮动，BFC可以包含浮动，让父容器形成一个新的BFC。
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并的三个场景：
(1)同一个BFC中，且同属于普通流中的垂直相邻元素外边距合并。
(2)父子外边距合并。
(3)空元素外边距合并。
合并规则：
(1)margin都是正值的时候，取两者之间的较大值。
(2)margin都是负值时，取绝对值较大的值。
(3)margin有正值有负值的时候，先取出负margin中绝对值较大的，然后和正margin最大值相加。
(4)所有毗邻的margin一起参与运算，不能分布进行。
不让相邻元素外边距合并的方法：
(1)被非空内容、padding、border和或clear分隔开。
(2)不在一个普通流中或BFC中。
(3)margin在垂直方向上不相邻。
父子外边距合并
相邻元素外边距合并
网友评论