标签：play float .com css盒子模型 blog 解释 isp 目的 自己的
什么是css盒子模型（Box Model）？
W3C中解释为：规定了元素框处理元素内容、内边距、边框和外边距的方式；
MDN：文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。
背景会应用于元素内容、内边距、边框三者组成的区域；
margin值可以设置为负值，很多情况下会需要使用margin负值；padding没有负数；
浏览器的兼容性：IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
那么什么是相对定位和绝对定位？
position：absolute | relative | fixed | static | inherit
absolute：绝对定位；相对于除了static定位以外的第一个父元素进行定位；
relative：相对定位；生成相对定位的元素，相对于其正常位置进行定位。
fixed：固定定位；生成绝对定位的元素，相对于浏览器窗口进行定位。
static：默认值；
inherit：继承
绝对定位：
相对于元素最近的已经定位的祖先元素定位，如果没有，则相对于body进行定位；
已经脱离文档流，可以通过z-index控制元素的覆盖关系；
绝对定位会隐式改变元素的display类型，同元素设置float：left | right;时一样，都会隐式将元素的display设置为inline-block；
但是float在IE6下的双边距bug就是用display:inline; 来解决的。
相对定位：
相对定位是相对于元素在文档中的初始位置；
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，移动元素会导致它覆盖其它框。
position:relative不会隐式改变display的类型。
每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
标签：play float .com css盒子模型 blog 解释 isp 目的 自己的
原文地址：http://www.cnblogs.com/ink0101/p/6085914.html
