vultr优惠码,vultr云服务器,vultr优惠,vultr教程,vultr购买,香港主机,香港VPS,香港服务器,服务推荐,国外VPS推荐

CSS3计算属性calc()的使用方法

网站教程 baishitou 162℃

CSS3计算属性calc()的使用方法

 

calc() 只作用于属性值

设置宽度:width:calc(100vw – 123px);

说明:1、vw是width of view(port)的缩写;

2、100vw表示百分之百的视图宽度;

3、123px是需要减去的宽度;

4、减号的两边必须都有至少一个空格。

设置高度:height:calc(100vh-123px);

说明:1、vh是height of view(port)的缩写;

2、100vh表示百分之百的视图高度;

3、123px是需要减去的高度;

4、同理减号的两边必须都有至少一个空格。

可以应用全部属性,例如:

.nr {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 10px);
  height:    calc(100vh - 10px);
  padding:   calc(1vw + 5px);
}

也可以仅用于部分属性,例如:

.nr {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

它甚至可以成为构成属性一部分的另一个功能的一部分! 例如,这里的calc() 用于渐变的色标中

.nr {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

calc() 用于长度和其他数值

以上所有示例本质上都是基于数字的。 我们会讲到一些数的使用注意事项(因为有时你不需要单位),但这是针对数字的数学,而不是字符串之类的东西。

.nr {
  /* Nope! */
  counter-reset: calc("My " + "counter");
}
.nr::before {
  /* Nope! */
  content: calc("Candyman " * 3);
}

CSS有很多长度,它们都可以与calc() 一起使用:

  • px
  • %
  • em
  • rem
  • in
  • mm
  • cm
  • pt
  • pc
  • ex
  • ch
  • vh
  • vw
  • vmin
  • vmax

无单位的数字也是可以接受的,例如line-height:calc(1.2 * 1.2); 以及诸如transform:rotate(calc(10deg * 5));之类的角度。 您也可以不执行任何计算并且仍然有效:

.nr {
  /* Little weird but OK */
  width: calc(20px);
}

注意:calc()不能在媒体查询中使用。

 

喜欢 (0)or分享 (0)