理解DIV+CSS盒子模型

  背景：1、今年刚毕业，在公司呆了几个月，还没过试用期。

          2、公司最近在做一个web项目，功能基本完成，界面仍需完善。

          3、项目组就几个人，其他人在修改功能上的问题和整理数据，界面调整自然就落到我的头上了。还好幸不辱命，能够胜任。

          4、部门有一个信息化专刊，用于记录公司信息化进程，其中有一个知识点滴栏目。

  事件：任务刚完成啊，作为新人还是有点积极性的，就抽空整理了一篇文章投稿到信息化专刊，关于页面布局盒子模型的，毕竟和最近工作的内容相关。
  文章内容：

        在Web页面的排版中，最流行的方式就是div+css。这种布局方式内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，体积更小打开更快。使用DIV+CSS就不得不弄清楚CSS中的盒子模型，盒子模型是什么样的呢？

请看下面一张图：

 

 

 

 

 

 

图中从里到外代表的分别是：

内容(content)：div中真正显示内容的地方，宽和高为div定义的宽度和高度。

填充(padding)：内容距边框的距离，用于文字或图片和边框保留距离。

边框(border)：div元素边框的宽度。

边界(margin)：div距离相邻元素或父层元素的距离。

整个div的宽度和高度计算就不是简单的定义中的width和height了。

计算方法如下：

实际宽度=左边界+左边框+左填充+内容宽度(width)右填充+右边框+右边界

实际高度=上边界+上边框+上填充+内容高度(height)+下填充+下边框+下边界

下面是一个实际的例子，这也是许多人容易弄错的地方，明明定义了100px的宽度，占位怎么成150px了呢？

实际占位宽度：10px+5px+10px+100px+10px+5px+10px=150px

实际占位高度：10px+5px+10px+100px+10px+5px+10px=150px

提醒：不同浏览器对宽度和高度的计算不一样，IE下需特别注意。

        有些浏览器把Div元素的宽度计算为130px，即不加margin的宽度，但是实际占位的宽度仍为150px，即加上margin的宽度。

领导回复：这些都是搞画面的重要的基础的知识，可以放到其他地方

mark

转载于:https://www.cnblogs.com/russellwang/archive/2012/10/11/DIV_CSS.html