盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。
目前有： 标准盒子模型和IE盒子模型 2种盒模型 ，区别在于：
为了满足跨浏览器的差异，我们比较肯定的方式是使用标准盒模型，这里通过在网页顶部增加DOCTYPE的声明，来解决跨浏览器兼容方案（或者使用css3的声明方式）：
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化，另外
块级元素：div , p , form, ul, li , ol, dl,form, address, fieldset, hr, menu, table...
行内元素(内联元素)：a , span, strong, em, br , img , input, label, select, textarea, cite....
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值：
box-sizing:content-box： W3C标准盒模型，默认属性。padding和border不被包含在定义的width和height之内。
box-sizing:border-box： IE6混杂模式盒模型， padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。
box-sizing：inherit ： 从父级元素中继承该属性。
如果设置box-sizing：border-box来使用IE6混杂盒模型 ，那么
设置padding与border后，内容区的宽度和高度被压缩为70px 70px,盒子的原尺寸仍然是100px 100px
当一个容器宽度定义为 width:100%之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的。如果使用该样式，指定为 box-sizing: border-box则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果是非常实用的。
CSS样式可能会是这个样子的:body{background:#999}#container{
width:960px
background:#fff
margin:20px auto
padding:10px
} 下面是一个效果预览： 设置为相对定位，当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：
#container{
width:960px
background:#fff
margin:20px auto
padding:10px
position:relative
} 将它定位到盒子的外面现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。
#logo{position:absolute
webgl可以用js调用openGL的，比如cs、极品飞车之类的游戏你应该知道，很多游戏都是openGL的，真正类似3D软件那种3D，里面有X,Y,Z轴向，构成一个立体空间，然后你可以放入一个人物、汽车或其他3D模型，上贴图，打灯光，游戏引擎实时渲染出带有凹凸、置换、颜色、漫射、反射、大气雾效、深景等通道组成成的游戏画面，openGL与3D软件渲染大原理是一样的，只是渲染精度没3D软件做图或做电影那么高，渲染算法和导入的3D模型面数、贴图大小什么的在openGL下都有限制，要保证游戏在主流的家庭电脑硬件上不卡。css只有X，Y两个轴向，只能构成一个平面，不能构成一个真正的立体空间，你看到的网上css做的3D立方体的例子原理类似：ps里面你画三个正方形平面色块，通过拉伸、透视等方法变形把三个正方形拼成一个立体正方形盒子的三个面，这个是视觉上的欺骗，只能拼凑出简单的立体形状，css并没有在一个3D空间内生成带三个轴向的物体，也没办法通过css导入真正的3D模型来个转一圈之类的，你想用纯css做个3D机器猫就不行了。
如果是webgl，你可以建个机器猫模型，把obj格式的模型文件导入，然后指定贴图，灯光等等，加上js代码控制，可以在支持的浏览器上360角度的展示机器猫了。webgl原理就和游戏引擎一样(目前肯定没游戏引擎强大)，只不过游戏引擎是用c++之类的来开发，展示的东西基本上都需要用户执行一个安装到本地电脑的过程，现在webgl你可以用js来开发，然后直接在浏览器上展示。
