DIVCSS 基础四:盒子模型

[复制链接]
建站高手 发表于 2015-9-5 18:10:15 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型!

什么是盒子模型?

对于初学者来说,不容易理解,但是对于生活中的盒子大家应该熟悉,大到集装箱,小到铅笔盒,盒子模型你完全可以理解成现实生活中的盒子就可以了,不然怎么能起个名字叫“盒子模型”呢?

好!既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫 “content(内容)”,而盒子的盒子壁给他起个名字叫“border(边框)”,如果盒子内部的东西比如是一块硬盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫“padding(内边距)”,如果我们需要购买许多块硬盘,还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充,那么盒子和盒子之间的距离我们称之为"margin(外边距)",请看下面两图:

padding(内边距)

padding(内边距)

margin(外边距)

margin(外边距)

OK~!这下盒子模型的四要素就出来了分别是:content(内容)、border(边框)、padding(内边距)、margin(外边距),如下图:

盒子模型的四要素

盒子模型的四要素

我们的页面就是由许许多多的盒子组成的,但是现实生活中的盒子我们会忽略外边距(margin),但是在页面中,我们是不能忽略外边距(margin)的,只有包括外边距的盒子模型在CSS中才是完整的,即使外边距为零,我们也不要忽略它,要知道他是存在的。

怎么样,理解了没有?盒子模型就这么简单~!

另外推荐阅读:
基础三:CSS选择器命名及常用命名
http://bbs.zb7.com/thread-529503-1-1.html
基础二:CSS选择器
http://bbs.zb7.com/thread-529501-1-1.html
基础一:CSS如何控制页面
http://bbs.zb7.com/thread-529478-1-1.html





上一篇:基础三:CSS选择器命名及常用命名
下一篇:基础五:块状元素和内联元素

大神点评7

teamczyx 发表于 2015-9-6 00:40:36 [DIVCSS] 显示全部楼层
感谢楼主无私的分享与奉献
向志祥明星会员实名认证 发表于 2015-9-6 00:48:16 [DIVCSS] 显示全部楼层
感谢楼主无私的分享与奉献
http://www.37hao.net
文山社区,努力做到文山最有影响力的网站
不一样的时光 发表于 2017-11-25 08:58:09 [DIVCSS] 显示全部楼层

车牌靓号 QQ靓号 手机靓号都在九五靓号网等你www.95lhw.com
215079508 发表于 2017-12-29 13:25:13 [DIVCSS] 显示全部楼层
找个小板凳坐下www.bjshenfa.com
老老实实做人踏踏实实
水水淼1201 发表于 2017-12-31 12:04:22 [DIVCSS] 显示全部楼层

谢谢分享
淘小淘 发表于 2019-5-27 15:18:58 [DIVCSS] 显示全部楼层
我只是路过站帮网打酱油的,顺便支持下
zb7ang 发表于 2019-6-10 15:25:10 [DIVCSS] 显示全部楼层
不错,谢谢分享!
大家足球 -> www.dajiazuqiu.com
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

建站高手

精英站长

  • 3489 积分
  • 999 帖数
  • 0 日志
广告招商 QQ: 5620010
快速回复 返回顶部 返回列表