css之定位元素

元素的定位是掌握css技术的核心，只有熟练运用元素定位才能用css创造出专业水准的页面布局。

定位元素的技术包括：

1. box model
2. float
3. position

所谓盒模型，就是指每一个html元素会在页面上生成一个盒子，将该元素包围其中。html元素其实是由一堆的盒子构成的。

p.test {    width: 200px;    height: 200px;    padding: 10px;    border: 10px;    margin: 10px;}

如上代码生成的盒子，width和height属性控制内容区的大小（即有字的区域），padding属性控制内容边界到边框内边界的大小，border属性控制边框的大小，margin属性控制边框外边界到相邻盒子的距离。可以把盒子模型看成是一个戒指盒，戒指本身占据的区域是真正的内容区域，戒指和盒子之间还有很大的空间由其他材料填充，这一部分可以看成是padding的内容，盒子本身的厚度自然是border的内容了。

float是实现页面多栏布局的关键技术。最初CSS设计float属性的主要目的是为了实现文本绕排图片的效果，不过后来发现这个属性成为了创建多栏布局的最简单的方式。为元素添加float属性，即可让其脱离正常文档流。形式上相当于从block元素变成inline元素，特点是不再占据一整行的空间。

使用float的时候会有一个问题，那就是浮动元素脱离了文档流，其父元素就会失去对他的控制，所以不再包围此元素，这种情况很多时候并不是我们想要的。这里介绍三种方法让浮动元素不脱离父元素，三种方法各有适用范围，应结合实际情况选择。

一：为父元素添加属性 overflow: hidden

二：同时浮动父元素

三：添加非浮动的清除元素 

第三种方法有两种实现形式，一是简单的在html标记中添加一个子元素，并给他应用clear属性。由于没有默认的样式，不会引入多余的空间，div元素很适合用在这里。

<section>    <img src="images/rubber.jpg">    <p>It's fun to float</p>    <div class="clear"></div></section><footer>I'm the footer.</footer>

然后就是为该div添加clear属性了

.clear {    clear: left;}

接下来介绍第二种实现形式，这是一个只用CSS实现清除的方法，并不需要在结构文档中添加多余的元素。

首先为父元素添加属性class="clearfix"，然后再使用这个神奇的clearfix规则。

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

最后介绍position属性，这是CSS布局的核心。position属性有四个值：static， relative， absolute， fixed，默认值是static。这里详细介绍relative和absolute两个属性值。

相对定位：给元素添加relative属性后，该元素会相对于它原来在文档流中的位置发生位移，利用top和left属性设置相对位移的大小。位移之后，该元素可能会遮住旁边的元素，而该元素的原始位置会空着，并不会被旁边的元素抢占。也就是说原始的文档流并没有被破坏，变的仅仅是该元素的位置。使用相对定位的关键是要考虑到元素原来的空间，合理的使用margin等属性，避免其他元素被重新定位的元素遮住。

绝对定位：绝对定位和相对定位的区别有两个。一是绝对定位的元素会彻底脱离文档流，也就是说绝对定位后，该元素的原始位置不会再空着了，其下方的元素会往上填充这个空出来的地方。另一个区别是绝对定位根据顶级元素body在定位，而相对定位根据元素的原始位置定位。通过top和left设定的偏移值，决定了元素相对于body元素的位置偏移多远。有的时候我们希望绝对定位元素不要根据body，而是根据其父元素来定位，要实现这个效果，只需要将相应的父元素的position属性值设定为relative就可以了。

固定定位：固定定位和绝对定位非常相似，区别只有一个。即固定元素根据视口来定位，而绝对定位根据body来定位。因此固定定位之后的元素不会随页面滚动而滚动，这个特性并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。