CSS盒子模型

一.盒子模型生活化      

    盒子是一个立体的，每一个CSS盒子都具备内容(content)、填充(padding)、边框(border)、边界(margin)属性，我们看的时候可以从俯瞰然后看一个平面；

 

 把该模型联系生活中的实际情况。网上买物品的时候，东西都装在盒子里面，邮递给购买者。尤其是一些珍贵的或者易碎的物品，都会在盒子中添加一些抗震的，防护塑料泡沫。例如固态硬盘，对应到盒子模型中，我们买的固态硬盘就是内容（content），防护塑料泡沫放在固态硬盘和盒子之间，作为一种填充物，保护它不被损坏。边框就是盒子本身的宽度。内容，填充，边框是一个盒子本身的，而边界是盒子与其他物品之间的距离。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

CSS的每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置，通过设置盒子模型的属性设置网页的布局。

    

二.盒子模型测试

CSS设置样式之后，通过在多个浏览器中检查浏览器的兼容性。学习牛腩新闻发布系统的时候，在CSS中多次尝试之后，不能每一个浏览器中发现问题。

用  IE8（自带开发人员工具），Firefox中的firebug插件，进行找到对应的位置，然后查看布局，总是可以很直观的找到问题所在。然后进行对应的修改。通过多次的测试之后，会对盒子模型的理解更加深刻。我们可以在IE8或者Firefox中随便打开一个网页，然后打开测试的工具，就可以查看到网页的布局，找到其中的盒子模型。

例如百度搜索框的盒子模型。

三.总结

        盒子模型的理论经过几次实践，调试之后可以理解的比较好。CSS布局考虑用户体验，浏览器的兼容性。理论容易理解，设计优秀的布局，需要广泛的借鉴和学习优秀的界面，结合自己的开发经验和特点，创造自己的风格；