(width)的使用什么是calc(calc)?

一、使用calc（）

什么是calc（）？

Calc（）从字面上我们可以将其理解为函数。实际上，calc是英文单词calc的缩写，它是css3的新功能，用于指定元素的长度。例如，您可以使用calc（）为元素的border，margin，padding，font-size和width属性设置动态值。为什么是动态值？因为我们使用表达式来获取值。但是calc（）的最大优点是它用于流体布局，并且元素的宽度可以通过calc（）来计算。

calc（）可以做什么？ calc（）允许您对元素进行计算。您可以使用百分比，em，px和rem单位值来计算div元素的宽度或高度，例如“ width：calc（50％+ 2em）”，这样就不必考虑元素DIV的宽度，并将这个烦人的任务留给浏览器进行计算。

calc（）语法

calc（）的语法非常简单，就像我们年轻时学会加（+），减（-），乘（*）和除（/）一样，我们使用数学表达式来表达：

.elm {
  width: calc(expression);
}

其中“ expression”是一个表达式，用于计算长度。

calc（）的计算规则

calc（）使用一般的数学规则，但也提供了更智能的功能：

浏览器兼容性

浏览器与calc（）的兼容性非常好。在IE9 +，FF 4. 0 +，Chrome19 +和Safari6 +中得到很好的支持。还必须在其前面添加每个浏览器制造商的标识符。不幸的是，移动浏览器与早期版本不是很兼容。

实际使用时，还需要添加浏览器前缀

.elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }

原始参考链接：“在CSS3中使用calc（）”，“ calc（）”

二、 vw，vh，vmin，vmax的使用1、 vw，vh，vmin，vmax的含义

1，vw，vh，vmin，vmax的含义

1，vw，vh，vmin，vmax的含义

（1） vw，vh，vmin，vmax是窗口单位，也是相对单位。它与页面的父节点或根节点无关。它由窗口的大小确定（视口），单位1，类似于1％。

视口是您的浏览器实际显示内容的区域，也就是说，您的Web浏览器没有工具栏和按钮。

（2）具体描述如下：

2、 vw，vh和％百分比之间的差异

（[1）％是相对于父元素大小的比率，vw，vh由窗口大小确定。

（2） vw的优点在于，vh可以直接获取高度，而在不设置车体高度的情况下使用％不能正确获取可见区域的高度，因此这是一个相当不错的优势。

3、当使用vmin和vmax进行移动页面开发时，如果使用vw和wh设置字体大小（例如5vw），则纵向和横向模式下显示的字体大小是不同的。

因为vmin和vmax是当前较小的vw和vh以及当前较大的vw和vh。在这里您可以使用vmin和vmax。使水平和垂直屏幕上的文字大小保持一致。

4、浏览器兼容性

（[1）台式电脑

（[2）移动设备

原始地址：“ CSS3-vw，vh，vmin，vmax的新单位使用详细说明（带有示例）”

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-357756-1.html