盒子模型&position定位

笔者在写本篇文章之前阅读了大量的资料，试图以一种简单易懂的方式把布局的精髓展现给读者；

盒子模型：

所谓盒子模型：把页面上的任何一个元素都看成一个盒子，到底是一个怎么样的盒子，当然这个盒子有自己独特的区别

下面就是盒子的模型图：

边框边距那些一般要自行指定，其实每个浏览器有自己的内置默认css文件，如果用户对有些属性没有设定即按照浏览器默认的

css文件属性进行配置，不同的浏览器的默认css文件不一样，为了不同浏览器的兼容问题，我们常常要清除这种浏览器默认行为

所以在别人的css文件里面常常看到最前面有这么几行：*{margin:0;  padding:0;}

前面的 * 号代表所有的标签元素，就是把所有的标签的外边距和内边距属性归零，

这样做的缺点是，标签太多，这句话是在每个标签都加了这个属性，但是有很多标签在整个页面中没有被使用，

标签这么多，这样笼统的强加了这两个属性显然页面载入方面性能不好；

现在比较好的做法是把需要的元素才加这两个属性，比如我只需要将 body div ul

这几个标签加上这两个属性就ok了：body,div,ul{margin:0;  padding:0;}

盒子模型在页面布局中举足轻重，内外边距可以控制元素位置距离，边框可以做一些样式；

html元素有两种：行内元素    块状元素

块状元素里面放的内容可以是一个或多个块状元素也可以是行内元素，

但是行内元素里面不能放块状元素

比如在span 里面放一个div是错误的，

position定位：static  relative absolute fixed

如果没有指定就是默认的：static  

relative：相对定位-------相对于父元素定位，没有父元素就参照页面左上角（浏览器）；

absolute：绝对定位-------相对于父元素定位

分两种情况：1：父元素的position属性值为：static  也就是没有设置position属性

定位标准始终为浏览器；

2：父元素的position属性值为：absolute || relative ；

定位标准为父元素；

使用绝对定位的盒子以它的“最近”一个“已经定位”（使用了position属性，并且设置为不是“static”的任意一种方式)

      的“祖先元素”为基准进行偏移，如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

网上看到很多float定位的这类说法，这种说法是不对的，利用浮动可以起到定位的效果，所以有的人惯以定位的说法，

引起初学者的疑惑；

还有个常见的说法 ：DIV+CSS布局，这种说法起因和上面一样，正确的叫法是：xHTML+CSS布局，

好了 ，就写到这里，行里字间仍有很多不足的地方，笔者随时更改；

尊重作者，转载请注明出处：http://blog.csdn.net/jiecooner

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

辗转一段时间，发现上面的内容写的并不够详细，有必要重新修改这篇文章了，

接下来的内容是作者在经过一段实际开发过后的总结,主要是针对position重编

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

position：relative,absolute,fixed;

relative：相对定位，始终相对与父元素左上角定位，不管父元素是否有position定位，这里假设这个父元素中只有这一个元素，

但如果这个父元素里面有多个子元素，那情况会有不同了，此时定位还受这些元素中的使用了relative的元素的影响（仅仅是relative，如果是使用的absolute或fixed的那些子元素不并会对当前的定位产生影响），

absolute：绝对定位，如果父元素使用了position定位，不管是以上三种的的那一种，那么定位的标准是父元素的左上角，如果父元素没有使用定位，这时候的定位标准变为浏览器的左上角，也就是把body作为父元素来定位，现在暂停讨论父元素里面有多个使用了定位的元素的情况，

是时候对于上面那堆枯燥的文字做进一步的解释了：

relative中我讲了父元素里面有多个使用了定位的子元素相互间会有影响的情况，在absolute中我暂没有说（当然我并不是默认没有影响），

这里引入一个关键字  “  流   ” ，请看我的解释（我只是为了让你理解一个技术的问题，而不是让你记住一个专业词的翻译，所以我对这个词的解释会很“有趣”）：

假设在body中放了几个div，当然你会知道div是块级元素，每一个div占一个行（我没有让它浮动），也就是几个div从上到下形成一个垂直向下的流，