12个鲜为人知的CSS事实

> CSS不是一种过于复杂的语言。但是，即使您一直在写CSS多年，您仍然可能会遇到新事物 - 您从未使用过的属性，从未考虑过的价值观或您从未知道的规范细节。

在我的研究中，我一直都遇到了新的小花絮，所以我想我会在这篇文章中分享其中的一些。诚然，这篇文章中的所有内容并不是所有的直接实用价值，但也许您可以在心理上提交其中的一些以供以后使用。

>

钥匙要点

CSS中的颜色属性不仅用于文本。它还影响缺少图像，列表元素上的边界，无序列表上的子弹点，有序列表上的数字标记和HR元素的颜色。> CSS中的可见性属性可以设置为“崩溃”。此值在所有元素上的“隐藏”工作类似于表行，表行组，表列和表列组，其工作方式类似于“ display：none”。但是，浏览器处理“崩溃”是不一致的。
• >
> CSS中的背景速记属性现在包括三个新值，除了原始五个值之外。新值是背景大小，背景 - 原始和背景卷 -
• > CSS中的剪辑属性仅适用于绝对定位的元素。您应用剪辑的元素必须是绝对或固定的。
在CSS中，垂直百分比相对于容器宽度，而不是容器高度。这适用于顶部和底部填充物以及顶部和底部边缘等属性。>>
1。颜色属性不仅用于文字
• >
>让我们从更轻松的东西开始。每个CSS开发人员都广泛使用了颜色属性。但是，有些人对CSS的经验不那么经验，可能没有意识到，它并不仅定义文本的颜色。
看下面的演示：

请参阅codepen上的sitepoint（@sitepoint）的笔CTWFG。

>在CSS中注意，在身体元素上仅使用一种颜色属性，将其设置为黄色。如您所见，页面上的所有内容都是黄色的，包括：

缺失图像上显示的alt文本

列表元素上的边框

上的子弹（或标记）
订购列表上的数字标记
HR元素
有趣的是，默认情况下，人力资源元素不会继承颜色属性的值，但是我必须通过使用边框彩色：继承来强迫它这样做。这对我来说是一种奇怪的行为。
>所有这些都通过规格验证：
• >

  此属性描述了元素文本的前景
  的前景颜色 内容。另外，它用于提供潜在的间接值
  …对于接受颜色值的任何其他属性。

  >

  >我想不出任何有资格的“前景”的东西，但是如果您这样做，请在评论中告诉我们。

  >

  2。可见性属性可以设置为“崩溃”

  >您可能已经使用了数百次可见性属性。最常用的值是可见的（所有元素的默认值）和隐藏的值，这使元素消失，同时允许其仍然占据空间，就好像在那里一样（与显示不同：无）。

  >可见性属性的三分之一且很少使用的值是崩溃的。此功能与隐藏在表行，表行组，表列和表列组之外的所有元素上的工作方式相同。对于这些基于表的元素，崩溃的值应该与显示相似：无，因此折叠行/列所占据的空间可以被其他内容占据。

  >

  不幸的是，浏览器处理崩溃的方式不一致。尝试以下演示：
  请参见笔的可见性：codepen上的sitepoint（@sitepoint）崩溃。
  CSS-tricks年鉴建议不要使用它，因为浏览器不一致。

  从我的观察值中：

  在Chrome中，如果您应用崩溃或隐藏，则没有什么区别（请参阅此错误报告和评论）

  > 在Firefox，Opera和IE11中，崩溃似乎完全按照应有的响应：该行被删除，下面的行移动。
  诚然，这个值可能很少会被使用，但是它确实存在，因此，如果您以前不知道，我猜您现在更聪明。
  • 3。背景速记属性具有新的值
  在CSS2.1中，背景速记属性包括5个远程值 - 背景色，背景图像，背景重复，背景 - 附件和背景位置。在CSS3及以后的情况下，现在包括三个，总计8个。这是值映射的方式：
  >
  请注意前向斜线，类似于字体速记和边界 - 拉迪乌斯的写作方式。斜线允许您在支持浏览器的位置后包含一个背景大小的值。

  >此外，您还提供了背景孔和背景纸条的最多两个可选声明。

  因此，语法看起来像这样：

  >

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  >使用此演示在浏览器中对其进行测试：

  请参阅codepen上的sitepoint（@sitepoint）的笔记新背景速记值。

  关于浏览器的支持，这些新价值似乎在所有现代浏览器中都可以正常工作，但是您可能必须为任何不支持的浏览器提供良好的后备，因此它优雅地降低了。

  4。剪辑属性仅在绝对位置的元素

  上工作

  说到背景剪辑，您之前也可能看过剪辑。看起来像这样：

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  这将在指定位置“夹住”元素（此处解释）。唯一的警告是，必须绝对将应用剪辑的元素放置。因此，您必须这样做：

  <span><span>.example</span> {
  </span>  <span>background: aquamarine <span>url(img.png)</span>
  </span>              no-repeat
                scroll
                center center <span>/ 50%
  </span>              content-box content-box<span>;
  </span><span>}</span>

  >您可以在下面的演示中查看剪辑在位置时如何禁用：绝对被切换：
  请参阅codepen上的sitepoint（@sitepoint）的笔sifju。
  >您还可以将元素设置为位置：固定，因为，根据规格，固定位置元素也有资格为“绝对位置”元素。
  5。垂直百分比是相对于容器宽度的，而不是高度
  >一开始我有点混乱，我之前写过的。虽然您可能知道宽度百分比是根据容器的宽度计算的，但同样根据容器的宽度而不是高度来计算诸如顶部和底部填充以及顶部和底部边缘之类属性的百分比。

  >。

  这是一个示例，您可以使用范围滑块进行调整，因此您可以看到效果：>

  请参阅codepen上的sitepoint（@sitepoint）的笔qlnpm。

  请注意，内部框上声明了3个“垂直”百分比（顶部和底部填充物以及底部边距）。当滑块移动时，它仅更改容器宽度。但是，其他值对此发生了变化，如页面上的输出所示，表明这些值（称为百分比时）基于容器宽度。

  6。边境财产有点像Inception

  >我们都在某个时候完成了此操作：

  边境财产是一个速记财产，设置边境风格，边界宽度和边界色 - 都在单个声明中。

  ，但不要忘记，边界属性所代表的每个属性本身都是速记属性。因此，只能宣布边境宽度：

  <span><span>.example</span> {
  </span>    <span>clip: rect(110px, 160px, 170px, 60px);
  </span><span>}</span>

  >这将为四个边界中的每个边界设置不同的宽度。边界彩色和边界风格也是如此，如这个可怕的演示中所示：

  请参阅codepen上的sitepoint（@sitepoint）的笔多个边框速记。

  此外，这些特性中的每一个都可以通过边界左式，边界宽度，边界底彩等进一步分解。

  <span><span>.example</span> {
  </span>    <span>position: absolute;
  </span>    <span>clip: rect(110px, 160px, 170px, 60px);
  </span><span>}</span>

  >

  >但是，您无法使用常规边框速记为不同侧面设置不同的值。因此，它的速记是速记内部的速记，但不完全是。

  >

  7。文本介绍属性现在是速记

  我知道这个列表上的某些东西会让您震惊。

  根据规格：

  >，这是标准的

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  此属性现在代表3个属性：文本 - 编写线，文本 - 编写色彩和文本式式风格。

  不幸的是，Firefox是唯一支持这些新属性的浏览器，并且（我假设是向后兼容），在速记中不支持它们。

  在Firefox中尝试下面的演示：
  请参阅codepen上的sitepoint（@sitepoint）的笔hapgb。

  演示正在使用长达值来执行此操作。最终，这将是一个艰难的问题，因为目前，任何看到文本编写额外价值的浏览器都会使整个声明无效，这显然不利于向后兼容。

  8。边界宽度属性接受关键字值
  >并不是完全令人震惊，这并不是什么新鲜事物，但是除了标准长度值（例如5px或1em）之外，边界宽度属性还接受三个关键字值：中，薄和厚。

  实际上，边界宽度属性的初始值是“中等”。下面的演示使用“厚”：

  >请参阅codepen上的sitepoint（@sitepoint）的笔边框宽度关键字。

  >浏览器呈现这些关键字值时，规格不需要它们将其映射到特定的长度值，但是从我看来，所有浏览器似乎都使用1PX，3PX和5PX。

  9。没有人使用边界图像
  >我在一段时间后写了有关CSS3边界图像属性的文章。除IE10及以下外，所有现代浏览器都支持该功能。但是有人在乎吗？

  >

  >这似乎是一个非常整洁的功能，使您可以创建流体的边框图像。在此演示中使用调整大小的句柄对其进行测试：
  > codepen上的sitepoint（@sitepoint）请参见笔边界图像演示。

  不幸的是，边界形象似乎是没有很多人使用的新颖性。但是也许我错了。如果您知道在真实项目中使用的任何边界图像的示例，或者如果您使用过，请在评论中告诉我们，我很乐意承认我错了。

  10。有一个空元素属性
  这个在包括IE8在内的任何地方都有支持，看起来像这样：

  >

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  正如您可能想出的那样，它用于HTML表。它告诉浏览器是否显示或隐藏没有内容的表单元格。尝试此演示中的“切换”按钮，以查看更改空元素属性值的效果：
  请参阅codepen上的sitepoint（@sitepoint）的钢笔空单元演示。

  在这种情况下，我必须确保边界可见且不会倒塌，并且我不得不在细胞边界之间添加一些间距。在某些情况下，此属性不会具有视觉效果，因为在表格上需要有任何可见的东西才能使任何区别。

  >

  11。字体风格的属性接受“斜”

  的值 几乎每次您看到字体式属性时，它都以“正常”或“斜体”的值使用。但是您也可以给它一个“斜”的值：

  >

  请参阅codepen上的sitepoint（@sitepoint）的笔ITALIC与倾斜。
  >但这到底是什么意思？为什么看起来和斜体相同？

  >

  规格解释了值“倾斜”的值…
  “……选择一种标记为斜面的字体，如果不是斜面的脸部或斜体。”
  规格中“斜体”的描述基本上是相同的。 “斜”一词是一个印刷术语，基本上代表倾斜的文本，但不是真正的斜体。

  由于CSS处理倾斜文本的方式，它与斜体可互换，除非（如规格所述）所使用的字体的面部被识别为斜的。

  >我从未听说过实际上有斜面的字体，但也许我错了。从我所做的研究来看，字体似乎是错误的，可以提供斜体和倾斜面孔，因为斜面应该是没有真正斜体的字体上的斜体版本。

  >

  因此，如果我没记错的话，这意味着如果字体没有真正的斜体面孔，将CSS设置为字体式：斜体实际上将显示为字体风格：斜面。

  12。 Word-brap与Overflow-wrap

  相同

  >包装属性的属性不经常使用，但在特定情况下非常有用。一个经常使用的例子是帮助长期不间断的文本（如URL）包裹，而不是脱离容器。这是一个示例：

  请参阅codepen上的sitepoint（@sitepoint）的笔词包装演示。

  因为这最初是Microsoft的创建，所以此属性在包括Internet Explorer（包括Internet Explorer）的所有浏览器中都支持。

  >尽管跨浏览器，并且从我看来，W3C决定用溢出包装替换Word-wrap - 我猜是因为以前的名字被认为是错误的名称。溢出包装具有与word-nap相同的值，而Word-brap现在被视为“溢出” - wrap的“替代语法”。

  >

  >虽然一些新的浏览器确实支持溢出包装，但由于旧浏览器的处理方式恰到好处，因此打扰它似乎毫无意义，并且所有浏览器都必须继续无限期地支持Word-wrap，出于遗产。

  >当所有使用浏览器自动更新时，我们可以开始使用溢出包装 - 但是在那之前，我看不到从旧语法更改的点。

  其中有多少个对您来说是新的？

  >

  您从这篇文章中学到了什么？我希望如此。可能大多数经验丰富的CSS开发人员都知道上述要点很多（即使不是全部）。但是，可能从CSS开始的那些可能会从中受益更多。

  >很有趣的是，看到其中有多少个对我们的读者来说是新的。在下面发表评论，告诉我们有多少是您新的（例如6/12、4/12或其他）。

  >
  以可学习的会员资格拾取更多的CSS提示和提示。您将可以访问数十个书籍和课程，包括

  的畅销书，开始css ，> CSS Anthology等。 经常询问有关CSS 的问题（常见问题解答）

  > CSS的某些独特属性是什么不知所周的？
  CSS或级联样式表具有几种众所周知的独特属性。例如，CSS拥有一个称为“计算”的属性，该属性允许您执行计算以确定CSS属性值。这对于响应式设计可能非常有用。另一个鲜为人知的属性是“ CH”，它代表角色，可用于设置与使用字体的“ 0”特征的宽度有关的宽度和其他测量值。

  >

  可以使用CSS来创建动画吗？
  是的，CSS可以用于创建动画。 CSS中的“动画”属性使您几乎可以使任何属性动画。您可以控制动画的持续时间，正时功能，延迟，迭代计数，方向，填充模式和播放状态。这可能是可以在网站上增强用户体验的功能强大的工具。
  >“继承”值在CSS中如何起作用？
  CSS中的“继承”值用于指定属性应从其父元素中继承其值。在您要确保跨元素一致性的情况下，或者您想通过减少冗余来简化CSS代码时，这可能很有用。

  >

  >在CSS？

  中，“ z index”属性的目的是什么，CSS中的“ z index'属性用于控制元素的堆叠顺序。具有较高“ Z index”值的元素将出现在“ z索引”值较低的元素的顶部。当处理重叠的元素时，例如在复杂的布局或创建模式或下拉菜单时，这可能特别有用。

  可以使用CSS用于样式的形式输入？

  是的，可以使用CSS来样式进行表单输入。您可以使用CSS来控制文本字段，复选框，无线电按钮和其他表单输入的外观。这可能是一种强大的工具，可以增强网站上表单上的可用性和美学。
  CSS中的“盒装大小”属性是什么？> CSS中的“盒装大小”属性用于控制元素的总宽度和高度的如何计算。默认情况下，元素的宽度和高度不包括填充和边界。但是，通过将“盒装”属性设置为“ Border-Box”，您可以在宽度和高度计算中包括填充和边框。

  >

  如何在CSS中使用“ Float”属性在CSS中工作？
  >
  CSS中的“ float”属性用于将元素推向左或右元素，从而使其他元素围绕它围绕它围绕它。这对于在图像上创建文本包装或创建多列布局可能很有用。
  > CSS中的“视口”是什么？

  > CSS中的“ fiewport”是指用户在网页上的可见区域。您可以使用CSS中的“大众”（视口宽）和“ VH”（视口高）单元相对于视口。这对于创建适应不同屏幕尺寸的响应设计特别有用。

  可以使用CSS来创建梯度吗？

  > CSS中的“伪元素”是什么？

  >> 在CSS中使用“伪元素”用于样式元素的特定部分。例如，使用“ ::”和“ ::”伪元素用于插入元素内容之前或之后的内容。这对于在网站上添加装饰功能可能很有用。

以上是12个鲜为人知的CSS事实的详细内容。更多信息请关注PHP中文网其他相关文章！