1-10.浮动与定位

2017-04-27 本文已影响0人 guidetheorient

1.1 浮动元素的特征

1.1.1 浮动元素可以左右浮动，直至它的边缘碰到所在容器的边缘或是另一个浮动元素边缘；
1.1.2. 浮动元素的父容器会得不到它的高度；
1.1.3. 浮动元素脱离文档的普通流，其他元素会忽视它，但文本（注意，不是一连串没空格的字符）可以围绕它；
1.1.4. 浮动元素会改变行内元素display属性为block，即可以设置宽高，边距等。

[浮动元素的特征](http://js.jirengu.com/wupiciwaqa/2/edit)

1.2 浮动元素对父容器、其他浮动元素、普通元素、文字分别的影响?

1.2.1 如1.1.2所述，如果父容器中浮动元素，那么父容器因为得不到它的高度而是自身高度塌陷；
1.2.2 其他浮动元素会按照顺序依次排列，直至父容器宽度不够进行换行；
1.2.3 其他元素会忽视浮动元素，文字会围绕浮动元素。

[1.2](http://js.jirengu.com/wecobubiti/2/edit)

2.清除浮动指什么? 如何清除浮动? 两种以上方法

1.父容器末尾加块级元素应用clear:both撑开父容器;

div clear:both

2.父容器末尾添加伪元素，将其设置为块级元素，并clear:both;

.clearfix:after{
    content:"";
    display:block;  /*or table*/
    clear:both;
}

伪元素清浮动

BFC清除浮动

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

值	属性	使用场景
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，它会固定在目标位置	/

4.z-index 有什么作用? 如何使用?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值越大，优先级越高。（对绝对定位方式元素使用）。
使用如图，第一个pink设置了z-index:99，其在其他几个元素上面。

z-index

5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

如图示，position:relative的元素偏移了，但其仍占据原来位置，其后的元素和未偏移前排布一样；而负margin改变了元素在文档流中的位置，所以也影响其后元素的排布。

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC的全称是 Block Format Content

特性：
- BFC会阻止父子垂直外边距（margin-top、margin-bottom）折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动

举例说明
- 6-1. BFC可以清除浮动，例子见2.3
- 6-2. BFC可以用来阻止父子外边距合并，如图第2个父容器设置了display:inline-block，所以父子上下外边距不再合并。
  
  阻止外边距合并
6-3. BFC不会重叠浮动元素
如图示，son2通过overflow:hidden设置为BFC，此时不再与son1重叠