1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：浮动元素会脱离文档流，会随着设置的float属性值的设定向左或向右移动，直到她的边缘触碰到父元素或者同为浮动元素的边缘，普通文档流会忽视浮动元素的存在。
a)对于父元素来说，假如子元素都是浮动的，则父元素高度塌陷
b)对于其他浮动元素来说，浮动元素遇到其他浮动元素时会停止继续移动，如果父元素的宽度不够，则浮动元素会换行，假如存在三个浮动元素，前两个并排浮动，父元素宽度不够的话，第三个会换到下一行，假如第一个浮动元素很大，那么第三个就会被第一个浮动元素卡住，不会重新起一行，而是在第二个的下面靠着第一个，呈现一种被卡住的 状态
c)对于普通元素，会忽视浮动元素的存在，假如有三个元素，第二个浮动，则第二个元素会覆盖第一个，第三个会占据原来第二个元素的位置
d)对于文字，文字内容会感受到浮动元素的存在，即文字不会浮动，会呈现一种文字环绕的效果
2、清除浮动指什么? 如何清除浮动?
清除浮动：由于浮动会导致父元素的高度塌陷或者样式变形等，所以要清楚浮动
方法：
1、在浮动元素后面添加一个空标签，并设置clear：both属性
<div style="clear:both"></div>
2、父元素属性中添加overflow: hidden;
.parent{
overflow: hidden;
}
3、使用伪类代替空白标签
.parent:after {
content: "";
display: block;
clear: both;
}
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
定位方式：position的定位方式可以分为两种，相对定位以及绝对定位，其取值有static、relative、absolute、fixed、sticky
a)static：默认值，根据正常的文档流定位
b)relative：根据正常的文档流定位，相对于本身的位置进行偏离，不影响其他元素, 本身在页面布局中的位置仍然存在，形成了重叠上下文, z-index有效
c)absolute：不在正常的文档流中，在页面布局中不占据位置，相对于离它最近的设置了postion 不是static的祖先的定位; 如果不存在这样的祖先, 就是相对于<body>的定位.
d)fixed：不在正常的文档流中，在页面布局中不占据位置相对于视窗来定位，视窗滚动时, 位置并不会移动，可以用来做在滚动条滚动时固定不变的部分（父元素假如存在transform的属性会出现bug）
e)sticky：粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。兼容性较差
参考MDN
4、z-index 有什么作用? 如何使用?
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
在一个层叠上下文中, z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下.
5、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
a)relative相对自身发生偏移，但是自身所占的位置还在，不会改变周围元素布局
b)margin为负值时，自身所占的元素让出来，影响周围元素以及布局
6、BFC 是什么？如何生成 BFC？BFC 有什么特性？
BFC：一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为 BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个 BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
如何生成：
父元素属性满足以下条件：float的值不为none，overflow的值不为visible，display的值为inline-block、table-cell、table-caption，position的值为absolute或fixed
特性：
a)margin会发生合并，同一个BFC内的相邻元素会发生margin合并现象
b)BFC不会重叠浮动元素
c)BFC可以包含浮动
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠的结果：
a)两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
b)两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
c)两个外边距一正一负时，折叠结果是两者的相加的和。
PS:浮动和绝对定位不与任何元素产生 margin 折叠，inline-block元素与其兄弟元素、子元素和父元素的外边距都不会折叠（包括其父元素和子元素）。
避免：
设置浮动，display：inline-block等或使其父元素均形成BFC可防止边距合并
父子外边距合并：
假如父元素top-margin 10px， 子元素top-margin 30px，且父元素不存在上边框、上内边距、内联元素、清除浮动，此时子元素与父元素的外边距发生合并，导致父元素对外呈现的外边距为30px
深入理解BFC
网友评论