浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素可以向左或者向右移动，直到它的边框碰到父元素的边框或者其他浮动元素的边框，浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样；
- 对父容器：父容器无法感知浮动元素存在；
- 对其他浮动元素：如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住；
- 普通元素：普通元素无法感知浮动元素存在；
- 文字：可以感知到浮动元素存在，会被浮动元素撑开。
清除浮动指什么? 如何清除浮动? 两种以上方法
- 解决浮动父容器高度塌陷问题；
- 方法：利用 clear属性，清除浮动；使父容器形成BFC。
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
-
定位方式：
- inherit：规定应该从父元素继承 position 属性的值（不常用）
- static：默认值,没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）；
- relative：生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px；
- absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定；
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定；
- sticky：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
-
CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
- 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素 position 的属性为 static 或继承来的static时就会按照普通流定位，这也是我们最常见的方式；
- 相对定位：对应 position 的属性的值为 relative ，如果对一个元素进行相对定位，他将出现在他所在的位置上，然后通过设置垂直或者水平位置，让这个元素相对于它自己进行移动，在相对定位中，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变 。
- 绝对定位与固定定位：
- 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样；
- 绝对定位的元素的位置是相对于距离最近的非 static 祖先元素的位置决定的，如果元素没有已定位的父元素，那么他的位置就相对于初始包含块 html 来定位 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过 z-index 属性控制叠放顺序，z-index 越高，元素位置越靠上；
- 绝对定位宽度 width: 100% (实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度) 绝对定位可以形成BFC可用来清除浮动 可用来阻止外边距合并 绝对定位可以形成垂直居中，left: 50%; top: 50%; margin: (自身宽高度的一半)px ；
- 固定定位：固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
z-index 有什么作用? 如何使用?
- z-index 规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面;
- z-index 仅在设置了 position 的值非 static 属性的元素上生效;
- z-index 除了 auto 以外的值赋给一个元素，就会创建了一个新的层叠上下文;
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文；
- 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素;
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
position:relative 和 负margin都可以使元素位置发生偏移，二者有什么区别。
- position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局；
- 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC：block formatting context(块级格式化上下文)，是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性
- 作用：
- 解决margin重叠问题，在同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，name他们的边距就不会合并。一般应用于嵌套关系。
- 清除浮动，BFC不会重叠浮动元素。
float 为 left/right
overflow 为 hidden/auto/scroll
display 为 table-cell/table-caption/inline-block
position 为 absolute/fixed(绝对定位)
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
外边距合并出现的三个场景：
- 同一个BFC，且同处于普通流中的垂直相邻元素外边距合并；
- 父子元素的外边距合并；
- 空元素的外边距合并。
-
合并规则：
- 两个 margin 都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后和正 margin 值中最大的 margin 相加；
- 所有相邻的margin要一起参与运算，不能分步进行。
-
不让相邻元素外边距合并的方法：
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个 BFC 中。
- margin 在垂直方向上不相邻。
