CSS 理解盒子模型

ttx9n · 发表于 2010-1-7 00:10:13

盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟悉吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢

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

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

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

怎么样，理解“盒子模型”了没？就是这么点知识

5vulod · 发表于 2022-8-9 01:41:02

逛逛看看瞧瞧

gc4hg · 发表于 2022-9-5 12:59:15

哦哦哦ijhhsdj

idy6_yus · 发表于 2022-9-21 19:47:41

8888888888888888

q215357618 · 发表于 2022-11-16 17:12:27

撒房产税陈飞飞

ppwxcg · 发表于 2022-12-15 08:26:04

hi哦回复iOS就看见

81708585 · 发表于 2023-1-5 02:31:04

那三门，你们谁寂寞才快乐撒

qzdhcgs · 发表于 2023-5-23 09:03:19

好人好人好人好人

bp5jgbcnt · 发表于 2023-8-3 02:25:47

看看怎么样再说

4r8oiin60 · 发表于 2023-9-30 12:05:26

需要很久了终于找到了

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS 理解盒子模型

相关帖子