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