css浮动定位BFC边距合并
2017-06-11 本文已影响0人
annynick
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素特征：
- 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
- 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
浮动元素造成的影响：
- 对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷 - 对其兄弟元素（非浮动）的影响
如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。 - 对其兄弟元素（浮动）的影响
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下 - 对子元素的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指清除掉元素float属性
清除浮动的方法:
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.使浮动元素的父容器变成BFC,父级div定义 overflow: auto等
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; 是在处理ie6兼容性问题
}
3.div:after 方法：（注意：作用于浮动元素的父亲）
.outer{
content:"";
display:block;
clear:both;
}
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit
规定应该从父元素继承 position 属性的值 - static
默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。left,top属性对static没有效果，static是靠margin这些定位的。 - relative
生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。 - absolute
生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。
如果没有父元素，位置是相对于body来进行的。
绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。 - fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。 - sticky
CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
兼容性较差，一般用JS实现
4.z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index只对定义元素有效
z-index的属性值:
- auto 默认值
- number 类型,number越大,层级越高
- inherit 继承父元素的z-index
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative和负margin都可以使元素位置发生偏移
- position:relative 相对于元素本身正常位置进行偏移，普通文档流中的位置仍然保留，即原来位置会留有空白，
不影响周围其他元素的布局。 - 负margin产生的偏移会影响周围其他普通流中的元素的布局
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是什么
BFC是block formatting context 块级格式化上下文的缩写，是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。BFC是页面上的一个隔离的独立容器， 容器里面的子元素不会影响到外面的元素，反之也是如此。
如何生成BFC
给元素添加任何一个可以触发BFC的css样式，例如：overflow:hidden,overflow:scroll,display:table-cell,display:inline-block,float:left，float:right等
BFC有什么作用
- 解决margin重叠:同一BFC下,相邻元素外边距会出现重叠,此时改变其中一个元素的BFC就可以解决该问题(多用于嵌套关系)
- 清浮动:overflow:hidden/auto/scroll或display:inline-block，table-cell或float:left,right添加浮动等方式让父级形成新的BFC
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
合并场景
- 当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距会合并
- 当一个元素包含在另一个元素中时(假设没有内边距或边框将外边距分隔开)，它们的顶和/或底外边距会合并
- 当一个空元素有外边距，但没有边框或内边距时，它的顶外边距和底外边距会发生合并，如果空元素与另一个非空元素相邻，它们的外边距仍然会发生合并。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框，浮动框或者绝对定位框之间的外边距不会发生合并。
如何合并
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算，不能分步进行。
禁止合并
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不相邻。
范例
<style>
*{margin:0;padding:0;}
.parent{width:200px;height:200px;margin:10px 0;background:yellow;}
.child{width:50px;heightz:50px;margin:20px 0;background:blue;}
</style>
</head>
<body>
<divclass="parent">
<div class="child"></div>
</div>
</body>
