盒子模型(非常形象)
来源:互联网 发布:行知职高 编辑:程序博客网 时间:2024/04/27 13:54
盒子模型(非常形象)
2013-07-04 15:45 138人阅读 评论(0) 收藏 举报
盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型!
什么是盒子模型?
对于初学者来说,不容易理解,但是对于生活中的盒子大家应该熟悉,大到集装箱,小到铅笔盒,盒子模型你完全可以理解成现实生活中的盒子就可以了,不然怎么能起个名字叫“盒子模型”呢?
好!既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的盒子壁给他起个名字叫“border(边框)”,如果盒子内部的东西比如是一块硬盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫“padding(内边距)”,如果我们需要购买许多块硬盘,还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充,那么盒子和盒子之间的距离我们称之为"margin(外边距)",请看下面两图:
OK~!这下盒子模型的四要素就出来了分别是:content(内容)、border(边框)、padding(内边距)、margin(外边距),如下图:
我们的页面就是由许许多多的盒子组成的,但是现实生活中的盒子我们会忽略外边距(margin),但是在页面中,我们是不能忽略外边距(margin)的,只有包括外边距的盒子模型在CSS中才是完整的,即使外边距为零,我们也不要忽略它,要知道他是存在的。
- 盒子模型(非常形象)
- 盒子模型(非常形象)
- 转一张图,非常形象地说明了OSI七层模型
- 转一张图,非常形象地说明了OSI七层模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 通向架构师的道路(第四天)之Tomcat性能调优-让小猫飞奔
- Java基础知识【上】
- CTime,Systemtime的比较还有转换成日期格式。
- 机器学习理论与实战
- "黑马程序员"其它类
- 盒子模型(非常形象)
- 滚动公告栏
- __init 、 __initdata 的解释
- iOS GPS
- 模拟退火算法
- “黑马程序员"关于面向对象
- 用 ping 来查看主机的系统
- 正在这紧要关头的jdzyzwc
- Java基础知识【下】