在HTML页面的DIV布局中,如果我们把DIV的宽度当做一个计算公式,让浏览器去自动去计算它们的值是不是很有意思呢?那么今天就说一下,CSS中的一个关于计算的函数 calc()
一、calc() 函数介绍
calc():英文单词calculate(计算)的缩写,是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。
二、calc() 函数定义
1、calc() 函数可以计算任何长度的值
2、calc() 函数支持 "+", "-", "*", "/" 运算;
3、calc() 函数使用标准的数学运算优先级规则;
4、特别要注意的是,运算符前后都需要一个空格。
5、现代浏览器都支持 calc() 函数
三、控制不自动换行
1. 使用CSS样式规定
在样式表中使用“white-space:nowrap;”可以禁止自动换行。这个属性可以被用于任何元素,比如段落、div等。
2.使用HTML实体
在HTML中,你可以使用实体来代替空格。实体是一段特殊的代码,可以被浏览器正确的解释。使用“ ”代表一个非断行空白。
3.使用“pre”标签
可以使用“pre”标签来表示预定义格式文本。这个标签内的每个字符都被保留,包括空格和换行符。这个标签通常用于显示程序代码或电子邮件等格式化文本。
4.使用“wbr”标签
“wbr”标签是一个HTML5的标签,用于控制单词之间的换行。当这个标签被插入到单词内的某一个地方时,如果这个单词在边界处需要换行,那么就在这个地方进行换行。