浮动定位BFC边距合并
2017-04-11 本文已影响0人
饥人谷_流水
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征
- 浮动元素可以左右移动，直到碰到包含容器的边框或碰到另一个浮动元素的边框。浮动元素不在文档的普通流中，文档的普通流中的元素也表现的好像浮动元素不存在一样（其他非浮动元素感知不到它的存在），但是普通元素中的行内元素却可以感知到浮动元素的存在，文字就会围绕着浮动元素。
影响
- 对父容器的影响：父容器无法感知到浮动元素。不与父容器发生外边距合并。无法撑开父元素。
- 对其他浮动元素的影响 ：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
- 对普通元素的影响：普通元素感知不到视浮动元素的存在，但会被浮动元素遮罩。
- 对文字的影响：文字可以感知到浮动元素的存在。文字将围绕着浮动元素。
用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动：解决浮动父容器高度塌陷问题；
如何清除浮动：
- 在父容器中加一个子元素div 并设置其样式为clear ：both; 父容器会被撑开。 缺点是增加了一个无意义的标签。
- 设置CSS样式：
．clearfix:after{
content: " ";
display: block;
flot: both;
}
此方法为最通用的一种方法，副作用最少。（和第一条本质一样）
- 使父容器形成BFC
父容器成为BFC后，父容器将不会出现高度塌陷的问题。
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
position=“ 以下值”
- 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，它会固定在目标位置
常用的值为relative , absolute , fixed。
4. z-index 有什么作用? 如何使用?
- z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。z-index越高，元素位置越靠上。可设置负的 z-index 属性值。注意 Z-index 仅在定位元素上起作用。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative：如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变
负margin：元素的显示位置和在文档流中的位置均发生变化，而且会影响后面元素在文档流中的位置。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
-
BFC是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。
-
生成方式：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
- BFC 的作用：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠. 范例
- 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
