背景: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