浮动定位BFC边距合并
2017-09-25 本文已影响0人
前端小木鱼
问答
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 对父容器的影响：如果父容器中的元素都是浮动元素，那么父容器会失去它的高度，在浏览器的表现为，父元素并未包裹住子元素。
- 对其他浮动元素的影响：浮动元素会按照顺序排列下去，若父容器剩余的宽度不够放下下一个浮动元素，那么它将向下移动，若是高度不同，在下移的过程中，浮动元素还有可能会被卡住。
- 对普通元素的影响：普通元素无法感知到浮动元素，会被浮动元素遮挡。
- 对文字的影响：文字可以感知浮动元素，会环绕浮动元素排列。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指解决父容器因所有子元素全都浮动而高度塌陷问题。
清除浮动的方法：
- 将父元素设置为浮动。
- 在浮动元素的后面添加一个空的元素，并设置其样式为 clear: both。
- 在浮动元素的后面添加一个伪元素，并设置其样式为 clear: both.。
- 让浮动元素的父元素形成BFC，消除浮动对后续元素的影响。
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
- 相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
- 绝对定位是通过absolute和fixed实现，absolute的参考点是绝对定位元素相对于距离最近的非static祖先元素决定的；如果没有已定位的祖先元素，则是由html决定；fixed参考点是视口；绝对定位更多是使用在相对于其它元素进行定位的时候，脱离文档流。
4.z-index 有什么作用? 如何使用?
因为绝对定位的元素脱离了文档流，可以覆盖在页面上其他元素的上方，z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- z-index值可为负数
- z-index 仅能在定位元素上奏效（非 position: static;）
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 使用负margin，使元素位置发生了偏移，原位置会被其他后续元素占据，影响其他元素的位置。
- 使用position: relative，元素在文档中的位置还是保留的，不会影响其他元素的位置，只是视觉上的偏移
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC，块级格式化上下文（Block Format Content），创建了BFC的元素就是一个独立的盒子，盒子里布局不受外部影响，也不影响外部元素的布局。
如何生成BFC：
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
作用：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠 示例
- BFC不会重叠浮动元素 示例
- BFC可以包含浮动 示例
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，一个元素内部没有东西，自身的上下边距相遇时也会发生外边距合并。只有普通文档流中块级元素的垂直外边距才会发生外边距合并。内联元素、浮动元素或绝对定位元素之间的外边距不会合并。
- 如何合并：会选取较大值进行合并。合并的结果： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。
- 不让相邻元素外边距合并的方法：
1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或一个BFC中。
3.margin在垂直方向上不毗邻。 - 父子外边距合并范例
