浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动元素会脱离文档普通流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
- 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
对父容器的影响：元素浮动之后会脱离文档普通流，而无法撑开其父元素，造成父元素高度的塌陷。
对其他浮动元素：相同方向的浮动元素会顺次排列，不同方向的浮动元素互不影响，但当空间不够时靠后的元素会被挤下来。
对普通元素：普通元素感知不到浮动元素的存在，会表现的像浮动元素不存在一样，被浮动元素遮住。
对文字：文字会环绕浮动元素排列。
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指解决浮动元素带来的父容器高度塌陷的问题
方法：
- 在最后加一个空div,设置clear:both。这样做的缺陷在于会多一个无意义的元素。
- 通用方案：兼容性比较好
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;//或者 display:block;
clear:both;//或者 clear:left;
}
- 使父元素形成BFC。可以使用下面的属性使父元素形成BFC
float:left|right
overflow:hidden|auto|scroll
display:table-cell|table-caption|inline-block
position:absolute|fixed
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- relative 相对定位，相对于元素本身正常位置进行定位
- absolute 绝对定位，相对于static定位以外的第一个祖先元素（offset parent）进行定位
- fixed 绝对定位，相对于浏览器窗口定位
z-index 有什么作用? 如何使用?
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
- z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效
- z-index属性可以设置为负值， z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
-
position:relative相对自己原本的位置偏移，不影响其它普通流中元素的位置。 -
负margin除了让元素自身发生偏移还影响其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC，Block Format Content块级格式上下文,是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
- 生成BFC的属性:
float:left|right
overflow:hidden|auto|scroll
display:table-cell|table-caption|inline-block
position:absolute|fixed
- 作用
- 阻止垂直外边距折叠
- 不会重叠浮动元素
- 可以包含浮动
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并场景:
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并；
- 当一个元素包含在另一个元素中时，外边距也会发生合并；
- 空元素的上下外边距也会发生合并。
如何合并：
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算，不能分步进行。
相邻元素外边距不合并的方法：
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不毗邻。
父子元素外边距合并 http://js.jirengu.com/qegay/1/edit?html,css,output
网友评论