《健壮性》专题

问题内容： 我目前正在设计CSS“巨型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。 目前， 似乎CSS 3过渡不适用于’display’属性 ，即，您不能进行从到（或任何组合）的任何过渡。 当有人将鼠标悬停在顶层菜单项之一上时，是否可以通过上述示例使第二层菜单“淡入”？ 我知道您可以在属性上使用过渡，但我想不出一种有效使用过渡的方法。 我也尝试过使用高度，但是那不幸地

问题内容： 使用flex容器和容器，您可以使用将对齐的内容与中心对齐。 有没有一种方法可以使用CSS网格实现使网格项溢出的相同行为？ 我创建了一支笔，显示了所需的弯曲行为 问题答案： Flex和Grid是不同的动物，因此在flex中简单的行为可能无法很好地转换为grid。 伸缩项可以跨容器居中，因为伸缩布局可与伸缩线一起使用。伸缩线是行或列。 当要求伸缩项目在行/列中居中时，它可以从头到尾访问整行

问题内容： 是否可以使用默认值覆盖display属性？例如，如果我以一种样式将其设置为none，而我想以其默认值以其他方式覆盖它。 还是找出该元素的默认值然后将其设置为默认值的唯一方法？不想知道元素通常是block，inline还是任何一个… 问题答案： 浏览器的默认样式在其用户代理样式表中定义，您可以在此处找到其来源。不幸的是，级联和继承级别3规范似乎并未提出一种将样式属性重置为其浏览器默认值的

问题内容： 我今天在看一个css文件，发现以下规则集： 星号在 padding和 line-height中是什么意思？ 谢谢。 问题答案： 这是“star property hack”，与“underscore hack.”相同。它在IE忽略的属性之前包括垃圾（*最多适用于IE 7，_最多适用于IE 6）。

问题内容： 我可以在CSS参考中看到如何设置图像透明度以及如何设置背景图像。但是，如何将这两者结合以设置透明的背景图像？ 我有一张要用作背景的图像，但是它太亮了-我想将不透明度降低到约0.2。我怎样才能做到这一点？ 问题答案： 两种方法： 转换为PNG并使原始图像0.2不透明 （更好的方法）有一个是前和相同的高度，然后应用背景图像和。

问题内容： 许多博客都表示，通过“ 加速”GPU来提高动画和过渡的速度，可以认为元素是3D，从而提高了性能。我想知道以下列方式使用此转换是否有影响： 问题答案： CSS转换会创建一个新的堆栈上下文并包含该块，如规范中所述。用简单的英语来说，这意味着对固定位置的元素应用了转换后，它们的行为将更像是绝对定位的元素，并且值很可能会被拧紧。 如果您看一下这个演示，您将明白我的意思。第二个div应用了转换，

问题内容： 如果是这样，它是否有效地弃用了该财产？ 问题答案： 这是来自各种答案的经过验证的信息的汇总。 这些CSS属性实际上都是唯一的。除了使元素不可见之外，它们还具有以下附加效果： 折叠 元素通常会占用的空间 响应 事件 （例如，单击，按键） 在参与 的TabOrder

问题内容： 查看CSS特异性规范，没有提到该规则值得多少“要点” 。 一个人何时超越另一个人？如果一个在另一个之后被声明会怎样？哪个规则更重要？有某种模式吗？ 从它的外观看，适用于具有更多特异性点的对象。但是，如果我声明一个bazillion id与类堆叠在一起并深深嵌套的话，会发生什么？它会否覆盖另一个未指定的标有的规则中设置的规则？ 问题答案： CSS中的特异性仅涉及选择器，而不涉及它们的关联

问题内容： 它指出，特异性是CSS的得分系统。它告诉我们元素值1分，类值10分，ID值100分。最重要的是，这些点是合计的，总数就是选择者的特异性。 例如： 身体 = 1点 身体.wrapper = 11点 身体.wrapper＃容器 = 111点 因此，使用这些要点，我期望以下CSS和HTML导致文本为蓝色： 为什么当15个班级等于150分而1个ID等于100分时，文本变成红色？ 显然，积分不只

问题内容： 第一个和第二个显示的内容只不过是一个空字符串，我认为应该是and 。但是，经过精心设置之后，第三个终于警报了。 但为什么？我如何才能正确检索该属性？ 谢谢。 问题答案： 的属性直接映射到 属性，而不是所施加的样式。为此，您需要getComputedStyle。 我会认真考虑切换演示文稿并将其与逻辑完全分开。

问题内容： 也许这是一个明显的答案，但是 为什么 地球上 会浏览器决定创建自己的供应商前缀之类的？ 我的意思是：为什么我必须输入： 是否因为每个平台都认为“我们很酷，我们会想出一种 更好的 方法来制作圆角”？键入三行似乎是完全和莫名其妙的冗余。 问题答案： 这是因为这些功能是在规范到达最终发布阶段之前由供应商实施的。 供应商前缀确保与功能更改等没有冲突。 最初，供应商前缀的目的是允许浏览器制造商开

问题内容： 怎样获得用CSS规则设置的元素CSS属性（例如width / height）（以百分比设置）（例如，百分比/ em / px）？（在Google Chrome浏览器中，最好是无框架的）。 using getComputedStyle返回当前值（以像素为单位），css()jQuery中也是如此。 例如： div在此示例中迭代所有元素时，我希望能够获得第二个divs的宽度50%（和第一个的

问题内容： 在以下情况下，为什么：after选择器需要content属性才能起作用？ 请注意，直到您指定content属性，您才看不到伪元素： 为什么这是预期的功能？您可能会认为显示块将迫使该元素显示出来。奇怪的是，您实际上可以在Web调试器中看到样式。但是，它们不会显示在页面上。 问题答案： 以下是各种W3C规范和草案的参考： 选择器级别3 伪元素’：before’和’：after’可用于在元素

问题内容： 就上下文而言，这是对先前问题的后续。与其深入研究，我不希望逻辑基于jQuery选择器来搜索那些规则的 效果 。 给定默认属性 被有选择地修改为 如何选择各自背景位置具有默认值的伪元素？按照如下方式复制选择器 什么都不匹配。试图用 仅产生值。 问题答案： 您不能像这样使用和伪元素。它们的目的是在分别指定的选择器之前和之后插入内容。 用法示例： HTML： CSS： 结果： 发生的事情是，

问题内容： 我似乎找不到具有多个属性的CSS过渡 速记 的正确语法。这没有做任何事情： 我用javascript添加了show类。元素变得更高且可见，它只是不过渡。在最新的Chrome，FF和Safari中进行测试。 我究竟做错了什么？ 编辑：为了清楚起见，我正在寻找简化我的CSS的简写版本。使用所有供应商前缀已经足够enough肿。还扩展了示例代码。 问题答案： 句法： 请注意，如果指定了延迟，