css百分比减px计算_您不知道有关在CSS中计算百分比保证金的知识

最新推荐文章于 2024-01-29 16:30:36 发布

cune1359

最新推荐文章于 2024-01-29 16:30:36 发布

阅读量610

点赞数

大多数网页设计师认为他们非常了解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应用程序）的开发团队 。