我不经常编辑 CSS,几乎每次我都需要去谷歌搜索CSS 盒子模型以检查是否padding
在内部border
和margin
外部,反之亦然。(刚刚再次检查并padding
在里面)。
有没有人有一个很好的方法来记住这一点?一点助记符,一个很好的解释为什么名字是这样的......
当使用 CSS 最终让你发疯时,他们将把你放入的填充单元格在墙壁内侧有填充。
销 - P 在
你正在使用一个盒子。如果你把东西放在盒子里,你会在里面放一些填充物,以确保它不会撞到侧面。保证金将是另一回事。
打印规格中“盒子尺寸”部分的图表,并将其贴在墙上。
对我来说,“填充”听起来比“边距”更内在。也许考虑打印页面会有所帮助?边距是位于最外面的区域——通常,你甚至不能打印到边缘——它们是无标记的。在这些边距内,可以填充内容以在内容和边距之间提供额外的屏障?
一旦你在 CSS 中工作得足够多,记住这一点将成为第二天性。
随着时间的推移,我刚刚学会了它——盒子模型相当简单,但人们觉得它很难的主要原因是因为body
它不会明显地破坏模型。
确实,如果您提供body
边距和背景,您应该会看到它被白色条带包围。然而,情况并非如此 -body
的填充与边距相同。这确立了关于盒子模型的一些不正确的事情。
我通常是这样想的:
内部通常使用填充。无论是在墙壁内部还是在送货箱上,都很简单。如果填充在里面,那么边距在外面。应该不会太难。
用萤火虫帮你看看。
Tim Saunders 给出了一些很好的建议——当我第一次开始使用 CSS 时,我特别注意构建一个好的、完全注释的基本样式表。该样式表已经更改了很多次,并且仍然是一个了不起的资源。
然而,当我遇到自己的盒子模型问题时,我开始使用“Mo Pi”。比如,“我还不够胖,我要吃mo pi。” 奇怪,但它对我有用。当然,我在学习 CSS 时体重增加了 20 磅……;-)
为自己创建一个带注释的基本样式表,您可以在需要创建新站点或编辑现有站点时将其用作模板。
随着知识的增长,您可以添加它并将其应用于各种不同的浏览器,以查看各种事物的行为方式。
您还可以添加关于其他难以记住的东西或反直觉的东西的评论或示例。
添加边框,即使只是暂时的。当你玩数字时,你会看到不同。
事实上,元素周围的临时边框是一种有用的工作方式,这样您就可以看到浮动下降的原因等。
我知道这是对您问题的回答,但更多的是提示。每当我处理边距和填充时,我都会在你正在使用的部分周围添加一个边框,然后从那里,它向我展示了我必须使用的房间。一切就绪后,我删除了边框。
PAdding 是元素 PAinting 的一部分:它扩展了元素的背景。将一对元素+填充视为共享一个共同的背景是有道理的。填充类似于绘画的画布:填充越大,画布越大,因此背景越大。边框(这幅画的框架)将围绕那一对。边距将画廊墙上的画作分开。考虑对象背景的概念有助于将对象+填充对粘合在一起。对内部与外部的通常解释并不牢记:一段时间后,每个人都会回到最初的混乱状态。还要记住,边距是垂直可折叠的,而填充不是。
边距:当您想要移动块时。填充:当您想要在块内移动项目时。