css一些不常见但很有用的属性操作大全

好的！下面我将为您详细讲解CSS一些不常见但很有用的属性操作大全。

一、CSS常用单位中的em、rem和vh、vw

1. em和rem

• em是相对长度单位，它依赖于所在元素的字体大小。
• rem也是相对长度单位，但是相对于根元素(html元素)的字体大小。

具体使用:

/*先定义body的font-size*/
body {
  font-size: 16px;
}

/*然后在某个子元素中使用*/
.example {
  font-size: 1.5em; /*相对于父元素字体大小15px*/
  font-size: 1rem; /*相对于根元素字体大小16px*/
}

2. vh、vw

• vh是视口高度的相对单位，1vh等于视口高度的1%。
• vw是视口宽度的相对单位，1vw等于视口宽度的1%。

具体使用：

.example {
  height: 100vh; /*设置元素高度等于视口高度*/
  width: 50vw; /*设置元素宽度等于视口宽度的一半*/
}

二、CSS中的透明度

CSS中的透明度可以通过opacity属性来实现。它的值必须在0-1之间，其中0表示完全透明，1表示完全不透明，中间的值则表示不同的透明程度。

具体使用：

.example {
  opacity: 0.5; /*设置元素透明度为50%*/
}

三、CSS中的calc()函数

calc()函数可以用来计算数值，它支持加、减、乘、除四则运算，并且可以和长度、百分比等值计算。

具体使用：

.example {
  width: calc(100% - 20px); /*元素宽度等于父元素宽度减去20px*/
}

四、CSS中的will-change属性

will-change属性可以提前告诉浏览器哪些CSS属性可能被改变，以便浏览器进行一些优化，如提前生成绘图层、缓存、预渲染等等。

具体使用：

.example {
  will-change: transform; /*告诉浏览器元素的transform属性可能会被改变*/
}

以上就是我为您讲解的CSS一些不常见但很有用的属性操作大全。希望对您有所帮助！