css定位

定位position

1. 绝对定位 position: absolute; 不占有位置,完全脱标,可以在任何地方显示

 #box_relative {
  position: absolute;
  left: 30px;
  top: 20px;/*盒子会显示到距离上边框20像素,左边框30像素的位置*/
}

Tips:因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序.

。
2. 相对定位position: relative; 占有位置,不脱标

 #box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

1. 固定定位position: fixed; 不占有位置,不随滚动条滚动,完全脱标,以浏览器为准,固定定位必须有宽度和高度,除非有内容将盒子撑开

与绝对定位类似,但只以浏览器为准(网站侧边的小广告和导航栏)

4.静态定位position: static; 所有元素本来就是静态定位,也就是默认值

子绝父相:如果子级元素加了定位,父级元素也需要加相对定位,如果父级元素没有定位,子级元素会以浏览器为准.对于加了绝对定位的盒子,margin: 0 auto;不再适用

5.浮动float:left;(向左浮动)float:right;(向右浮动)
浮动的目的是为了让多个块级元素同一行显示

浮动会使元素脱离标准流,不占位置,且会影响标准流。 浮动总会找离他最近的父级元素对齐,但不会超出内边距。

• 当一个父级元素中的若干个块元素需要同一行显示，则每个子级元素都要设置浮动。
• 元素添加浮动后，会具有行内元素的特点，元素大小取决于内容多少。

清除浮动造成的影响

为解决父级元素因 子级元素浮动因其内部高度为0的问题。
子级元素高度不确定（比如文章长度），所以父级元素一般不设置高度，标准流下子级元素会将盒子撑开。
子级元素脱标后，由于父盒子没有高度，会不显示。
clear 属性规定元素的哪一侧不允许其他浮动元素。
1. 额外标签法
选择器{clear:属性值;}

img{
    clear:both;  /*图像两侧都不允许出现浮动*/
    }

属性值包括left(清除左侧影响)、right（清除右侧影响）、both（清除两侧影响）

2.给父级元素添加overflow属性的方法

overflow:hidden;
这会触发BFC,可以清除浮动影响(hidden可以替换为auto或scroll，一般用hidden)
3.伪元素消除浮动方法

.clearfix::after{content: "."; display: block; height: 0;clear: both; visibility: hidden}

• 名字自拟,一般为clearfix
• content后尽量添加内容,防止旧版本浏览器会有空隙
• display: block;为转换成块级元素
• height:高度指定为0
• clear: both;消除浮动
• visibility: hidden;可以隐藏内容
  IE6、IE7版本格式为:

.clearfix{
    *zoom: 1;
}

3.双伪元素消除浮动

.clearfix: before,
.clearfix: after{
    content: " "; display: table;
}
.clearfix: after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

• content中不写内容
• display: table; 可以触发BFC
• clear: both; 消除浮动
• 最后一句考虑IE6、IE7