1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，即父容器高度塌陷。视觉上，父容器没有包含住浮动的子元素。
其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮挡。
对文字的影响：文字会感知到浮动元素的存在，会被挤到浮动元素的外边，形成环绕效果。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清理浮动:解决浮动父容器高度塌陷问题，让父元素在视觉上包围浮动元素
三种方法：
（1）利用 clear属性，清除浮动
在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;清除浮动，实现了父容器在视觉上包围浮动元素的效果。缺点是增加了一个无意义的标签。
（2）利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。可以对父容器添加这些属性,形成新的BFC达到“清浮动”效果，但存在局限性。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
(3)通过在父元素后面添加一个伪元素，设置为 block并清除左右浮动解决问题，其本质还是第1种方法。（此方法最佳）
.clearfix{*zoom: 1;} （此语句适用于IE6、7）
.clearfix:after{content: ""; display: block; clear: both;}（此语句适用于IE8及以上，没有副作用）
将display设置为block是因为:after是伪元素，要想获得clear属性必须将他转换为block。
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left 属性则决定了该元素的最终位置。
static | relative | absolute | sticky | fixed
| position值 | 含义 |
|---|---|
| inherit | 规定应该从父元素继承 position 属性的值 |
| static | 默认值，没有定位，元素出现在正常的流中 |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位，并未脱离文档流，且元素显示位置发生变化，但元素在文档流中的位置不变，不影响后面元素原本在文档流中的布局。 |
| absolute | 绝对定位的元素则脱离了文档流，不占据空间。绝对定位的元素的位置是相对于距离最近的非static的祖先元素位置决定的。如果元素没有已定位的祖先元素，则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。 |
| fixed | 固定定位。生成绝对定位的元素，相对于 viewport 视口。 |
| sticky | CSS3新属性，可认为是position:relative和position:fixed的合体。元素在跨越特定阈值前为相对定位，之后为固定定位。它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时效果相当于fixed定位。 |
4.z-index 有什么作用? 如何使用?
z-index 属性置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index仅在定位元素上奏效（设置了position非static属性的元素），且z-index的值只能在兄弟元素之间比较。
因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性auto | number | inherit
| z-index属性值 | 说明 |
|---|---|
| auto | 默认值，不建立层叠上下文。 |
| number | 无单位的整数值，可为负数 。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。设置为0会建立层叠上下文。 |
| inherit | 从父元素继承 z-index 属性的值。 |
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素原本在文档流中的布局。
- 负margin，元素的显示位置和在文档流中的位置均发生变化，会改变后面元素原本在文档流中的位置。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
- block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context (BFC)；
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
- run-in box: css3 中才有。
Formatting context
Formatting context 指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有block-level box参与， 它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
如何生成 BFC
对元素设置以下属性，就会为它们的内容物创建一个新的块级格式化上下文。
- float: left | right;
- overflow: hidden | auto | scroll;
- display: table-cell | table-caption | inline-block;
- position: absolute | fixed;
| overflow属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
BFC作用
- 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
- 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
出现外边距合并的3个场景
1.相邻的兄弟元素之间的外边据合并，需要满足同属于一个BFC时。
2.父子元素的外边距合并。需要满足父元素没有border和paddinng隔开
3.空元素的外边距合并。
合并规则
1.两个margin都是正值的时候，取两者的最大值；
2.当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3.当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4.所有毗邻的margin要一起参与运算，不能分步进行。
解决外边距合并
1. 相邻的兄弟元素之间的外边据合并
不让相邻元素外边距合并的方法：
因为相邻的兄弟元素之间的外边据合并，需要满足同属于一个BFC。所以我们让某个兄弟元素新生成一个BFC即可去除外边距合并。设置以下属性：
float: left | right;
overflow: hidden | auto | scroll;（即overflow不为visible）
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
注意，在形成BFC的方式中（float为left/right，display的值为inline-block、table-cell、table-caption）这两个能直接起效果，position为absolute/fixed还需指定top值。但（overflow的值为auto或者hidden）这个必须外面还要包裹一层父元素。
2. 父子元素之间的外边据合并
消除外边距合并的方式一：给父元素加边框
消除外边距合并的方式二：给父元素加padding
父子外边距合并的范例
父子元素之间发生外边据合并
给父元素加边框消除外边距合并
给父元素设置padding消除外边距合并
外边距合并的意义
网友评论