1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征:
- 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
- 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略-浮动元素而向上一个任意非浮动元素靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
影响:
- 对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，即父容器高度塌陷。视觉上，父容器没有包含住浮动的子元素。
- 其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
- 普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮挡。
- 对文字的影响：文字会感知到浮动元素的存在，会被挤到浮动元素的外边，形成环绕效果。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
1. 方法一：添加新的元素，应用clear:both;
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
2.方法二：
父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）是其形成BFC。
HTML：
<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
CSS
.over-flow{
overflow: auto;
*zoom: 1; //zoom: 1; 是在处理兼容性问题
}
原理：设置父容器为下列属性中的一个，使得父容器形成BFC，从而达到“清浮动”效果：
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
3.方法三：为父元素设置：after来清除浮动
HTML：
<div class="outer"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
CSS
/*方法1*/
.outer{
*zoom: 1; //zoom: 1; 是在处理兼容性问题
}
.outer:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.outer{
*zoom: 1; //zoom: 1; 是在处理兼容性问题
}
.outer:after{
content:"";
display:table;
clear:both;
}
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
1. static（默认）
元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
参考点：普通文档流
使用场景：默认不加其他定位方式就是static
2. inherit
从父元素继承position
3. relative
相对定位元素，设置偏移后其原本占据的位置仍在文档中。
参考点：相对于元素本身正常位置进行定位
使用场景：不想影响其他元素的位置、作为绝对定位的参考点。
4. absolute
生成绝对定位的元素，脱离文档，不再占据文档中的空间，其他元素会填充原本的空间
参考点：相对于static定位以外的第一个祖先元素（offset parent）进行定位
5. fixed
固定定位，脱离文档流，不再占据原空间
参考点：相对于浏览器窗口
使用场景：应用在各种不随滚动条变化的内容
sticky：
属性：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。由于兼容性问题，此类效果通常由js实现。
4.z-index 有什么作用? 如何使用?
- z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。
- z-index仅在设置了position非static属性（relative、absolute、fixed）的元素生效，且z-index的值只能在兄弟元素之间比较。
- z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。
-
什么是层叠上下文？
层叠上下文，英文称作”stacking context” 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
这里出现了一个名词-z轴，指的是什么呢？
表示的是用户与屏幕的这条看不见的垂直线（参见下图示意-红线）：`
网页中z轴示意
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 使用position:relative偏移元素之后，元素原先占据的文档空间没有发生变化，不会影响到其他元素的位置。（萝卜移走了，坑还在）
- 使用负margin偏移元素，会改变元素本身所占据的文档空间，会影响其他元素的位置布局。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC定义：
块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
生成BFC:
- 根元素
- 设置float的值不为none（left、right）；
- 设置position的值为absolute或fixed;
- 设置overflow不为visible（其中hidden、auto副作用最小。☆☆☆☆☆）
- 设置display为inline-block、flex、或者inline-flex;
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
作用：
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
合并条件：
- 同一个BFC，且同处于普通流中的垂直相邻元素外边距合并。
- 父子元素的外边距合并。
- 空元素的外边距合并。
如何合并：
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算，不能分步进行。
如何不让相邻外边距合并：
- 设置阻挡，例如：padding，边框，非空内容,clear
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不毗邻。
总结：
这些margin都处于普通流中，并在同一个BFC中；
这些margin没有被非空内容、padding、border 或 clear 分隔开；
这些margin在垂直方向上是毗邻的，包括以下几种情况：
- 一个box的top margin与第一个子box的top margin
- 一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
- 一个box的bottom margin与紧接着的下一个box的top margin
- 一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子元素。
例外的情况
根元素的外边距不会参与折叠
不设置任何属性的空span和空div不影响任何布局，可以无视之。
网友评论