江苏龙网

  1. 主页 > 生活百科 > >

css怎么用，divcss布局经典实例( 六 )


。消息–我的{
背景:# ff 2089；
左边距:20%；
右边距:0；
}
当您输入新内容并按Enter键时，新添加的消息列表的相应结构如下图所示:
显示时间戳
我们的目标是在消息列表的顶部显示创建的消息的时间戳 。我们需要这样做，这样即使在滚动消息列表时，这个时间戳也总是可见的 。这里我们借助CSS的伪元素来实现:
。消息–我的::之后{
内容: attr(数据-时间戳)；
}
这时你看到的效果是这样的:
这种效果不是我们想要的 。我们在样式上做了一点小小的改动，让鼠标悬停在新添加的消息列表上才能看到时间戳，并且这个时间戳固定在消息区的顶部 。
。消息–我的:悬停::之后{
背景:# 000；
color:# ff 2089；
内容: attr(数据-时间戳)；
left:0；
填充:5px；
位置:固定；
top:0；
宽度:100%；
}
这个效果现在看起来像这样:
现在时间戳已经固定在页面的顶部，您可以继续优化它，并在 。消息 。
但是也不行，因为固定定位是相对于viewport，而不是它的祖先元素 。然后，这个时候，最后一个新的CSS特性应该出来了 。
步骤19:探索遏制
CSS包容是一个令人兴奋的新命题 。它有许多选项来限制浏览器特定元素的样式、布局和绘制 。这在修改DOM时特别有用 。在浏览器中，即使很小的改变也可能导致浏览器重绘整个页面，这是非常昂贵的 。即使浏览器试图为我们做很多优化，页面的重绘还是对性能有一定的影响 。
使用CSS包容，我们可以圈出页面的一部分，说“这里发生了什么，就在这里做相应的事情” 。这是保护元素免受外部变化的另一种方式 。
CSS的内容是一个新的属性，使用关键字contain，它支持四个属性值:
布局
颜料
大小
风格
您还可以组合一些关键字，如contain: layout paint，这些关键字只适用于元素的这些行为 。但是它还支持两个额外的值:
contain: strict 意同 contain: layout style paint size contain: content 意同 contain: layout style paint每个值都有点不透明，所以我建议您阅读规范，并在开发人员工具中使用它们，看看实际会发生什么 。
layout point和layout point是两个重要的值，因为它们可以在需要大量DOM操作时优化性能 。然而，在我们的演示中，我们可以使用contain: paint来帮助我们定位时间戳 。
根据规范，当使用paint时，“元素充当包含绝对定位和固定定位”的后代的块 。这意味着我们可以设置contain: paint on 。聊天，让元素在固定的位置 。聊天将基于卡而不是视口 。使用transform: translateZ(0)可以获得相同的效果 。
试试看，效果很完美:
CSS包容是比较新的功能，目前只能在Chrome版本52+中看到 。如果你想了解更多这方面的内容，你可以阅读下面这篇文章:
CSS Containment in Chrome 52 （ 译文 ）摘要[/s2/]
就是这样 。我们对这五个CSS新特性有了一定的了解 。大部分都很简单，但是对于CSS遏制还是比较复杂的，建议多花点时间了解一下 。虽然这些是一些新特性，并且在一些浏览器中没有得到很好的支持，但这些新特性总有一天会出现在你面前，你可以在项目中使用它们 。我今天花了这么多时间，通过两个例子来说明这五个特性，主要是向大家展示这五个特性有什么作用，以及在实际项目中如何使用 。


推荐阅读


上一篇：知识付费市场规模，2020知识付费发展前景

下一篇：青年创业基金在哪里申请，创业基金申请条件与流程