第CSScalc()函數(shù)的介紹與使用方法

在HTML頁面的DIV布局中，如果我們把DIV的寬度當(dāng)做一個(gè)計(jì)算公式，讓瀏覽器去自動(dòng)去計(jì)算它們的值是不是很有意思呢？那么今天就說一下，CSS中的一個(gè)關(guān)于計(jì)算的函數(shù)calc()

calc()函數(shù)介紹

calc()：英文單詞calculate(計(jì)算)的縮寫，是css3新增加的一個(gè)功能。它可以動(dòng)態(tài)的設(shè)置元素樣式中border、margin、pading以及width等屬性的值。

calc()函數(shù)定義

1、calc()函數(shù)可以計(jì)算任何長度的值

2、calc()函數(shù)支持+,-,*,/運(yùn)算；

3、calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

4、特別要注意的是，運(yùn)算符前后都需要一個(gè)空格。

5、現(xiàn)代瀏覽器都支持calc()函數(shù)

calc()函數(shù)的語法

calc(expression)

expression：一個(gè)數(shù)學(xué)表達(dá)式，會(huì)返回表達(dá)式所計(jì)算出的值

示例：

width:calc(100%-10px)；

calc()函數(shù)用法示例

示例1：

html

head

metacharset=utf-8

title博客標(biāo)題/title

style

.div{

width:100px;

height:100px;

position:relative;

background-color:bisque;

}

.div2{

width:20px;

height:20px;

background-color:blueviolet;

position:absolute;

/*計(jì)算結(jié)果：60px*/

top:calc(100%-40px);

/*計(jì)算結(jié)果：50px*/

left:calc(100%-50px);

}

/style

/head

body

div>

運(yùn)行結(jié)果如下圖：

CSS代碼解釋：

top:calc(100%-40px);

left:calc(100%-50px);

相當(dāng)于

top:60px;

left:50px;

示例2：

html

head

metacharset=utf-8

title博客標(biāo)題/title

style

.div{

width:200px;

height:100px;

position:relative;

background-color:bisque;

}

.div2{

width:50px;

height:100px;

background-color:aqua;

display:inline-block;

}

.div3{

width:calc(100%-60px);

height:100px;

background-color:brown;

display:inline-block;

float:right;

}

/style

/head

body

div>

運(yùn)行結(jié)果