浮动定位BFC边距合并
2017-09-12 本文已影响0人
饥人谷_一叶之秋
一.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 特征：浮动元素会脱离正常的文档流，普通元素感知不到浮动元素，但是浮动元素可以感知已经存在于文本框中的浮动元素和非浮动块级元素，文字可以感知到浮动元素，相当于围绕着浮动元素。
- 影响：
1.因为浮动元素脱离了正常的文档流，所以无法撑开父元素，造成元素塌陷。
2.有其他浮动元素时，当父容器足够宽时它们会一次排列，如果宽度不够时会有浮动元素被挤到下一排，如果前一排的浮动元素高度不同被挤下的浮动元素有可能会被卡主。
如图：
任务10-1.png
任务10-2.png
任务10-3.png
3.普通元素因为感知不到浮动元素，所以浮动元素不会对普通元素造成影响，但是有可能会被浮动元素覆盖。
4.因为文字可以感知到浮动元素，所以文字所在行框因为浮动元素的挤压而缩短，从而围绕浮动元素排列。
二. 清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。
- 清除浮动：
- 使用带有clear属性的空元素：
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。然而这个方法需要添加大量无语义的html元素。
2.使父容器形成BFC：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
然而使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？难道要全部使用folat吗（确实有这种布局方式倒是）。BFC的几种方式都有各自的问题，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。
三.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit 规定应该从父元素继承 position 属性的值
- static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- relative 生成相对定位的元素，相对于其正常位置进行定位。还在文档流中，原来所占用的位不会被其它元素所占有。如，"left:20" 会向元素的 left位置添加 20 像素。
- absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。如果没有这样的祖先元素，则参照初始块即浏览器视口。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 - fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
- sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
四.z-index 有什么作用? 如何使用?
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 父子关系处理
如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方。 - 兄弟之间子元素
如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定.
五.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative是在自身的文档流中让自己显示上发生偏移，文档流中其他元素不会因为它的偏移而产生位置上的变化。
- 负margin是让元素的外边框产生空隙从而发生偏移，此偏移会影响到元素后面的元素的位置。
六 BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
- 生成 BFC：
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed; - BFC的作用：
- 清除内部浮动
任务10-4.png
生成BFC，就能够清除浮动了
任务10-5.png
2.防止垂直 margin 重叠: Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
任务10-7.png
3.BFC作用：自适应两栏布局
任务10-8.png
七.在什么场景下会出现外边距合并？如何合并？ 如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 当两个垂直外边距（margin）相遇时，将形成一个外边距合并，合并后的高度以这两个外边距中高度值较大值为准;父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上或下外边距合并。
- 两个margin都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的；
当有正有负的时候，取两者的和。 - 相邻非浮动元素，父子元素没有阻挡。
- 垂直相邻元素外边距合并：
1.设置浮动
2.设置其中一个元素display:inline-block等等 - 父子元素外边距合并：
1.为父元素设置padding或border
2.设置父元素为BFC
任务10-9.png
