大多数网页设计师认为他们非常了解CSS。 毕竟,功能不那么多-几个选择器类型,几十个属性以及一些级联规则,您无需记住它们,因为它们可以归结为常识。 但是,当您深入了解具体细节时,会有许多设计师真正不了解的模糊细节。
当我检查过去六个月在网上提供的免费CSS测试的结果时,我发现了一个问题,几乎没有一个人做对 。 在参加考试的数千人中, 只有14%的人通过了考试。
问题可以归结为: 如何计算利润率?
问题
假设您的网站有一个容器div
,其中有一个内容div
:
现在,让该内容div
的顶部边距:
.content {
margin-top: 10%;
}
好了,所以它的10%......但什么 10%? 这就是只有13.8%的人可以正确回答的问题 。 请记住:这些人可以访问Google!
我喜欢这个问题, 答案似乎应该很明显 。 如此之多,以至于我怀疑大多数人只是猜一个(猜错了)。 但也许这似乎并不明显给你。 我的意思是,如果您真正使用自己的想象力,浏览器可以通过多种方式来计算这样的边距。
那么,如果我为您缩小选择范围,那又会如何呢,因为测试中的问题实际上是多项选择。 这是您的选择:
- 内容div高度的10%
- 容器div高度的10%
- 内容div宽度的10%
- 容器div宽度的10%
请记住,只有13.8%的人可以从此列表中选择正确的答案。 那比机会还糟!
仔细看看答案; 您会发现实际上只需要了解两件事:
容器还是内容物?
首先, 边距的大小是基于内容div本身的大小还是基于容器div的大小 ?
现在这不是一个给我的东西,但是您可能可以相信自己的直觉。 如果我将div设置为其容器宽度的50%,然后我希望其左右边距填充其余空间,那么我自然会将它们分别设置为25%(因此,百分比总计为100%)。 为此,百分比裕度必须基于容器的尺寸。
果然,参加考试的人中有三分之二正确地回答了这一部分。
宽度或高度?
其次, 边距顶部的大小基于该元素的宽度还是高度 ?
如果您一直在关注,那么您可能已经处于戒备状态。 对于这么少的人选择正确的答案,这必须是一个技巧性的问题,对吗?
但是,我敢打赌,您几乎不能相信答案不是身高。 好吧,不是。
是的,我们在这里谈论的是最高利润。 是的,该边距的大小是垂直度量。 是的,如果一个块是其容器高度的50%,而您给它的最大边距为25%,则您希望它是容器高度的25%。 而且你会错的。
如果您认为它一定很高,请不要感到难过。 参加考试的人中有将近80%同意您的意见:
这很有意义……不,真的!
还是不相信吗? 这是W3C CSS规范的引文:
相对于生成的框的包含块的宽度计算百分比。 请注意,上边距和下边距也是如此。
如果您想知道的话,顶部和底部填充也是如此。 至于边框,将其宽度指定为百分比是非法的。
所以在这一点上,您可能会认为CSS的创建者要么是傻瓜 ,要么就是他们犯了一个非常愚蠢的错误。 但我在这里告诉您,有两个很好的理由将垂直边距基于包含块的宽度:
水平和垂直一致性
当然,有一个速记属性,可让您为块的所有四个边指定边距:
margin: 10%;
扩展为:
margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;
现在,如果您编写了上面的任何一个,您可能希望该块的所有四个边的边距都相等,不是吗? 但是,如果左边距的边距和右边距的边距是基于容器的宽度,而margin-top和margin-bottom是基于容器的高度,则它们通常是不同的!
避免循环依赖
CSS将内容布置在垂直于页面向下堆叠的块中,因此,块的宽度通常完全由其父代的宽度决定。 换句话说,您可以计算块的宽度,而不必担心该块内部的内容 。
块的高度是另一回事。 通常,高度取决于其内容的组合高度 。 更改内容的高度,然后更改块的高度。 看到问题了吗?
要获取内容的高度,您需要知道应用于内容的顶部和底部边距。 如果这些边距取决于父块的高度,那么您就麻烦了,因为您无法在不知道另一个的情况下计算一个!
王牌组
这样就可以解决问题:测试中最难的问题,现在您可以回答。 想知道您在其余测试中的表现吗? 自己尝试。 我保证,大多数问题都比这个问题容易得多。
同时,我正在寻找一个最棘手的新问题! 您认为没人知道CSS的哪些细节?
编者注: 这是由Kevin Yank为Hongkiat.com编写的。 自1999年以来,凯文(Kevin)就开始撰写有关网络的文章,其中包括有关PHP,CSS和JavaScript的书籍。 他还主持了有关网络的播客,会议上的讲话以及视频培训。 现在,他领导Sit the Test (开发和进行在线测试的Web应用程序)的开发团队 。
有关Hongkiat的更多信息:
现在阅读:
翻译自: https://www.hongkiat.com/blog/calculate-css-percentage-margins/