自主学习Html+CSS第六天+CSS定位

CSS定位

一.清除浮动

人生就像乘坐北京地铁一号线：
途经国贸，羡慕繁华；
途经天安门，幻想权力；
途经金融街，梦想发财；
经过公主坟，遥想华丽家族；
经过玉泉路，依然雄心勃勃…
这时，有个声音飘然入耳:乘客你好,八宝山马上就要到了！
顿时醒悟：人生苦短，有始有终。
好比我们的浮动，有浮动开始，则就应该有浮动结束。

1.为什么要清除浮动

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

2.清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

3.清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法
演示示例：额外标签法

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 
<div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便 缺点： 添加许多无意义的标签，结构化较差

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。(BFC后面讲解)

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after {  
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;  
}
.clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

二.定位(position)

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！

1.为什么要用定位？

那么定位，最长运用的场景再那里呢？来看几幅图片，你一定会有感悟！
第一幅图，小黄色块可以再图片上移动：

第二幅图， 左右箭头压住图片：

第三幅图, 在盒子外面多出一块，更加突出：

以上三个小地方，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做。

2.元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

1丶静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

2丶相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

3丶绝对定位absolute (拼爹型)

[注意]如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位
若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

• 子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。
这句话的意思是子级是绝对定位的话，父级要用相对定位。
首先，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。
就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。
但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？ 请看如下图：

所以，我们可以得出如下结论：
因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是相对定位.
这就是子绝父相的由来。
如果距左边的距离,就要以盒子的左边界计算,距右边的距离就要按盒子的右边界计算,同理 距上和距下 也是按盒子的上下边界计算
比如 子盒子 right:0px; 是子盒子的右边界到父盒子的右边界,而不是子盒子的左边界到父盒子的右边界

3.绝对定位的盒子水平/垂直居中

普通的盒子是左右margin改为auto就可，但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50%父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了margin-left。

4.固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

记忆法：就类似于孙猴子，无父无母，好不容易找到一个可靠的师傅（浏览器），就听的师傅的，别的都不听。

ie6等低版本浏览器不支持固定定位。

5.叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2;
注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

6.四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

7.定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换， 都转换为行内块模式，行内块的宽度和高度跟内容有关系。
因此比如行内元素如果添加了绝对定位或者固定定位后，浮动后，可以不用转换模式，直接给高度和宽度就可以了。