css特殊知识点-part2

1.特殊值

1.1 inherit关键字

使用该关键词覆盖另一个值,这样该元素就会继承其父元素的值

  这是一些特殊值<p>inherit关键字</p>

1.2 initial关键字

每一个CSS属性都有初始(默认)值,如果将initial值赋给某个属性,那么就会有效地将其重置为默认值

2.相对单位

2.1em和rem

em是最常见的相对长度单位,适合基于特定的字号进行排版,在CSS中,1em等于当前元素的字号。
rem是root em的缩写.rem不是相对于当前元素,而是相对于根元素.不管在文档的什么位置使用rem,1.2rem都会有相同的计算值.

2.2自定义属性(即CSS变量)

定义一个自定义属性

:root{
  --main-font: Helvetica, Arial, sans-serif;
}

使用自定义属性

p{
  font-family: var(--main-font);
}

提供备用值

:root{
  --brand-color:#369;
}

p{
  color:var(--brand-color,blue)
}

JavaScript改变自定义属性

  const rootElement = document.documentElement;
  const styles = getComputedStyle(rootElement);
  <!-- 获取自定义属性 -->
  const mainColor = styles.getPropertyValue("--main-bg");
  <!-- 修改自定义属性 -->
  rootElement.style.setProperty('--main-bg','#cdf');

最后修改于 2023-02-08