你对CSS的布局了解多少？

一个CSS的好经验和一个长期令人沮丧的经验之间的区别往往是一些小细节的问题。CSS确实很微妙。我看到的最常见的问题之一就是布局。就我个人而言，我喜欢研究模式。我注意到我倾向于使用一小群模式来解决大多数布局问题。这篇文章是关于那些我用来让自己通过布局挑战的CSS模式。它也是关于不可知地处理情况，不管使用的CSS方法，无论是SMACSS、BEM，甚至是CSS在JS中的热门话题，因为它们都关注属性本身，而不是架构、组织或策略。，让我们从一个测试开始我们将使用一个我碰巧做的叫做可疑.io我用它来创建一个测试，我们将在下面讨论。别担心，没有收集到个人数据，结果是匿名的，而且是完全免费的。测试的目的是看你是否能在不首先出示材料的情况下识别特定的CSS行为和问题。我并没有打算让测试变得困难，但是CSS布局的细微差别往往有点复杂，尤其是在没有大量接触它们的情况下。记住，这一切都是为了好玩。结果并不能说明你有多了不起，但希望你能从中得到价值。考试是10道题，应该花10分钟或更短的时间。参加CSS布局测验，对考试感兴趣，但不想参加？这里有一个带正确答案的问题链接。已经完成了吗？伟大的！让我们一个接一个地复习这些问题，以便更好地理解测试中涉及的布局模式。问题1:盒子模型学习盒子模型应该是每个人的首要任务。虽然这篇CSS技巧盒模型文章可能有点陈旧，但不要低估它的价值和与现代CSS的相关性。Box模型是几乎所有与布局相关的CSS主题的必备知识。这个特殊的问题是测试如何获得Box模型的s计算宽度。盒子显然有width: 100px;，但是盒子模型的默认规则将width属性应用到盒子的内容层。计算的宽度（页面上呈现的宽度）是内容层、填充层和边框层的总和。因此，答案是112像素： .box {width: 100px; /* Take this */height: 50px;padding: 5px; /* Plus this x2 for left and right */border: 1px solid red; /* Plus this x2 for left and right */background-color:> If you\"ve encountered a situation where the last column or tab in a UI wraps down to the next line and you were confident that five tabs (all set to width: 20%;）加起来是100%，那么很可能这就是问题所在。宽度为20%的五个制表符的总和确实达到了100%，但是如果涉及到填充和/或边框，这些制表符将增加宽度，最后一个制表符将没有空间放在同一行上。在引入CSS的前后，一个名为box-sizing的新工具出现在了CSS中。这允许我们改变我们想要width应用的盒子模型的哪一层。例如，我们可以执行box-sizing: border-box;，这意味着我们希望任何width规则都应用于边界层的外部，而不是内容层。在这个测试题中，如果应用了box-sizing: border-box;，计算出的宽度将是100px。这对你们中的一些人来说是个老消息，但对专业人士和新手都是一个很好的提醒。有很多关于盒子模型以及如何使用盒子大小作为重置的文章，所以它一次应用到整个项目中。框大小调整和继承框大小调整可能稍微好一点的最佳实践是两篇关于CSS技巧的优秀文章。问题2：边框很有说服力第二个测试问题几乎可以被认为是第一个问题的\"第二部分\"。记住，阅读\"盒子模型有层次，它们都有助于计算出宽度和高度\"是一回事，在真实情况下能够识别盒子模型问题是另一回事。这个特殊的问题在那些已经做了一段时间CSS的人中有点经典。它源于这样一个事实，即边界占用空间，并将推动周围的东西，因为它们是盒子模型的一部分。在国家过渡时期引入边界，比如:hover，意味着盒子会变大，从而将随后的盒子推倒。它还可以创造一种紧张的体验：在测试问题的所有可能的解决方案中，在初始的\"未悬停\"状态下做border: 2px solid transparent将是唯一解决问题的方法。box-sizing没有解决这个问题，因为我们没有明确设置高度。如果我们有，那么边界将被考虑在高度的内部，并且不会发生移动-但事实并非如此。还有其他解决方案没有被提及作为可能的答案。一种是用box-shadow仿制边框，另一种是用outline代替border。这两种方法中的任何一种都不会导致在状态更改期间发生变化，因为它们不是盒子模型中的层。下面是另一篇CSS技巧文章，可以阅读更多关于这些解决方案的信息

你对CSS的布局了解多少？

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么