以前学习CSS，首要的任务就是理解“盒子模型”，因为盒子模型是CSS中非常重要的模型概念，介绍了padding，margin，border，content的空间定位，今天的项目卡在一个简单的问题上，所以用一篇文章做个记录，提醒自己不要忘记，以免以后再卡。（下图是css的盒子模型）今天遇到的问题是，我用了半透明的边框，但是不能顺利的穿过显示背景的图案或者颜色。后来发现原来盒子的边框是预设好的。事实上，它就在盒子里面。border虽然在box里面，但是并不违反刚才的box模型，因为border围起来的空间还是padding和content，但是如果border变成半透明的，就会显示原来box的背景色。（如下图所示）为了让边框能够平滑的显示外面的背景图案或者颜色，需要用到box-sizing和background-clip这两个CSS3属性来设置，让我们来看看这两个属性如何使用：box-sizingbox-sizing有两个值可以设置，分别是：content-box（默认值）和border-box，如果是content-box的情况下，我们设置paddingbox或border的，box会被拉长，因为padding和border在box里面很长，但是如果我们把box-sizing设置为border-box，那么它会一直保持原来的大小，但是也会相对压缩内部空间，我自己设计网页的习惯是提前把所有的div都设置成border-box，这样计算尺寸更方便，也可以避免在内容上加padding使outerframelarger然后根据当前情况决定是否改成content-box。以下示例使用三个示例进行比较和参考。半透明的蓝色方块是原始尺寸。第一张图片设置padding：20px；第二张图片除了padding:20pxBorder:10pxdottedrgba(255,0,0,.5)外还有设置；第三张图和第二张图一样的设置，但是box-sizing设置为border-box，经过对比，可以很明显的看出彼此之间的差异。HTML：
