盒子模型&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