TEL:400-8793-956
当前位置:网站讲堂

分享使用的几个有用的CSS属性

提问者: 近期获赞: 浏览人数: 发布时间:2021-11-29 09:08:16

 我将向您展示 10 个令人兴奋的 CSS 属性。其中一些在 MDN 网络文档上被标记为实验性的,这意味着它们刚刚取得成果。正如他们在他们的网站上所说的那样,如果其中一个或两个都为真,则一项技术是实验性的:

 
它在不到两个现代主要浏览器中默认实现和启用。
 
它的定义规范可能会以向后不兼容的方式发生重大变化(即它可能会破坏依赖该功能的现有代码)。
 
如果是实验性的,你应该考虑它是否可以用于生产。
 
1.纵横比
图像的纵横比是其宽度与高度的比率。非常常见的纵横比是:
16:9(常用于视频)
4:3(例如照片)
1:1(正方形)
要为图像设置纵横比,我们必须先计算一个百分比并将其应用于padding-top属性。对于上面的 3 个比率,它看起来像这样:
9 / 16 = 0.5625 =>顶部填充:56.25%
3 / 4 = 0.75 =>顶部填充:75%
1 / 1 = 1 =>填充顶部:100%
现在有一种更好、更直接的方法可以做到这一点。我们可以使用以下命令代替 padding-top:
纵横比:16 / 9;
纵横比:4 / 3;
纵横比:1 / 1; 
浏览器兼容性
浏览器兼容性还不错。Firefox 部分支持,可以启用。不幸的是,Safari 落后于许多其他功能。
 
 
2. content-visibility 和 contains-intrinsic-size
 
当您阅读内容和可见性时,您可能会想到 2 个常见的 CSS 属性。
显示:无
可见性:隐藏
它们通常用于控制内容的可见性。新的内容可见性属性类似,但它为我们提供了几个优点。主要是性能的提高!
该content-visibility属性在 Chromium 85 中启动,可能是用于提高页面加载性能的最有影响力的新 CSS 属性之一。
它使浏览器能够跳过渲染工作,包括布局和绘画,直到需要它为止。这意味着不会渲染离屏内容,我们可以在初始加载时节省几毫秒并提高性能。
如何使用它?最简单的方法是使用auto作为值,因此浏览器决定何时以及如何使用它。
.container {
  内容可见性:自动;
  包含内部尺寸:1000px;
}
注意 contains-intrinsic-size 属性。
为了实现 的潜在好处content-visibility,浏览器需要应用大小限制,以确保内容的渲染结果不会以任何方式影响元素的大小。
我们需要为元素设置 contains-intrinsic 大小,否则浏览器可能认为它的高度为 0,在这种情况下,我们将无法获得性能优势。
为了更好地控制显示/隐藏元素,您还可以使用content-visibility: hidden。它的行为类似于display: none,但它保留了元素的渲染状态!
有关更多详细信息,我建议您阅读这篇文章。
浏览器兼容性
它类似于纵横比,但在这里 Firefox 甚至没有部分支持。这并不重要,因为这是一项功能,如果您使用它并不会破坏您的网站,并且不受支持。它只有在正确应用时才能帮助您提高性能。
 
3.::marker伪元素
 
::marker适用于列表项<li>和<summary> 元素。但是,只有少数 CSS 属性可以在规则中使用。您可能正在考虑颜色。没错,最后我们可以改变点和方块的颜色,我们不必依赖:before伪元素。我们可以这样使用它:
::标记{
    颜色:红色;// 在这里使用一些漂亮的十六进制颜色 :-) 
    font-size: 1.2em; 
}
 
另一个受支持的属性是内容,因此您可以像这样使用它,例如:
li::marker {
    内容:“
上一篇: 对背景渐变图像使用 CSS 渐变
下一篇: 返回列表
城市网站导航:无锡网站建设 徐州企业网站定制 常州网站开发哪家好 苏州网站改版 南通网站开发 连云港网站建设 淮安网站建设公司 盐城网站定制 扬州网站改版公司 镇江网站开发 泰州高端网站制作 宿迁高端网站开发 江阴高端网站开发 宜兴建设网站 新沂建设网站 邳州建设网站 常熟建设网站 张家港网站改版 昆山公司网站开发 太仓高端网站制作 丹阳高端网站制作 句容专业建站 泰兴网站制作公司 合肥网站建设 芜湖网站制作 蚌埠网站建设 淮南网站制作哪家好 马鞍山网站建设 铜陵网站制作公司 安庆网站建设公司 黄山网站制作 滁州网站建设 阜阳网站设计 六安网站建设 亳州网站制作 宣城网站建设 巢湖网站建设哪家好 桐城网站制作 天长网站建设 明光网站建设 全椒网站建设 扬中网站建设公司 城市小程序导航: