html-css 布局基础

本文档回顾了在工作中常会用到的html／css的布局基础，由于很多坑只有在实际中踩到才会去总结，因此，本文也会不定期更新。ok，let's start！

盒子模型详解图

position 属性详解

工作里面，常常会用到position的四个属性：static／relative／absolute／float，配合相应的属性，也就可以实现相应的页面布局。

接下来，就具体分析一下各个position属性：

1. position: static

在 css 所有元素的position属性的默认值都是static，因此在绝大多数情况下，我们都不需要显式地设置position: static，那么这个属性值有什么意义呢？

我觉得它主要的作用就是取消前一个设置过的position属性，例如：在你的两个页面里，同时存在div#div-1，现在第一个页面需要设置为position: absolute，而第二个则不需要设置绝对定位，就需要在第二个页面设置position: static。

2. 相对定位 position: relative

relative是相对定位，在给元素设置了position: relative之后，就可以通过设置元素的top／bottom／left／right来调整元素的位置。不过，使用position: relative的时候也要注意：

元素设置了relative的时候，是相对于元素本身位置进行定位；
元素设置了relative以后，可以通过设置top／bottom／left／right改变元素当前的所在位置，但是，在元素位移以后，元素本身的位置变化了，而元素最初所占的物理空间依旧存在，也就是说，元素相对定位以后，并没有影响其它相邻的元素；
元素设置了relative以后，如果没有设置top／bottom／left／right，元素位置不会发生任何改变。

3. 绝对定位 position: absolute

绝对定位absolute是position的第三个属性值，元素设置了position: absolute之后，整个元素就会漂出文档流，元素自身的物理空间也就随之消失了。这也就是与relative的不同，它不会具有之前的物理空间。如果绝对定位元素的祖先没有设置过任何的relative／absolute设置，那么它的定位是相对于html。

4. relative 和 absolute 的混合使用

基于第3点所描述的absolute定位的原理，我们就可以在实际布局中将relative和absolute结合起来用。原理差不多就是：

如果一个元素absolute以后，它的参照是离自身最近的元素是否设置了relative，如果有，就会以离自己最近的元素定位；如果没有，那就会向祖先元素寻找relative，一直寻找到html为止。

由此，我们就通过将父级元素设置为position: relative，然后将子元素设置为position: absolute，最后通过对子元素top／bottom／left／right属性的设置，在父级元素里完成布局，如两列、三列布局。

5. float

我们可以在一个元素上使用float: left和float: right让元素向左或者向右，而且还可以使用文本围绕在这个元素的周边（这个作用在文本围绕图片特别有用，即设置图片浮动）。不过需要注意的是：

浮动和绝对定位相比，解决了高度自适应的问题，但是，浮动会破坏当初的文档流，使其父元素坍塌，无法撑开原来的高度，所以还需要清除浮动。

关于清除浮动，差不多有三种方法：

最古老的方法clear: both：需要添加一个额外的元素，比如在浮动元素下面加一个
，然后定义它的样式为clear: both；
最简单的方法overflow：只需要在父元素里添加overflow: auto; zoom: 1就行了，不过IE6以下不支持。
利用伪元素：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear: both方法，只是区别在于:clear在html插入一个div.clear标签，而这种方法则是利用其伪类在元素内部增加一个类似于div.clear的效果。（其实:after就可以清除浮动，不过在浏览器兼容的时候会出现一个垂直边距叠加的bug，所以需要加上:before来完成兼容）。

6. position: fixed

position: fixed也是设置绝对定位的方法，与position: absolute不同的是，它是相对于浏览器窗口进行定位，可以通过top／bottom／left／right对为止进行调整。

如果看了之后还是不太明白，之后可能会写具体的代码来说明，先点个喜欢和关注再说呗！