CSS3 calc()會(huì)計(jì)算屬性詳解
我要評(píng)論前言
正如其名，calc是css3中新增的計(jì)算屬性，讓很多屬性增加了一個(gè)表達(dá)式的說法；
calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能，你可以使用calc()給元素的border、margin、pading、font-size、width和height等屬性設(shè)置動(dòng)態(tài)值。
怎么使用
calc()可以使用數(shù)學(xué)運(yùn)算中的簡(jiǎn)單加（+）、減（-）、乘（*）和除（/）來解決問題，而且還可以根據(jù)單位如px,em,rem和百分比來轉(zhuǎn)化計(jì)算。
標(biāo)準(zhǔn)的寫法：
.class{
/*
area: expression;
*/
width:calc();
padding:calc();
margin-top:calc();
...
}
兼容性
基本理論
- calc可以做用于任何具有大小的東東，比如border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值
- 支持的運(yùn)算單位： rem , em , percentage , px
- 計(jì)算優(yōu)先級(jí)別和數(shù)學(xué)一致
注意點(diǎn):
calc 內(nèi)部的表達(dá)式，在使用運(yùn)算符號(hào)時(shí)，兩遍必須加上空格（雖然乘除可以無視，但還是建議帶上）?。。。?！，不然會(huì)解析錯(cuò)誤??！，看演示寫法
width:calc(10 * 10px);
width:calc(50% - 50px);
width:calc(50% + 5em);
width:calc(10% / 1rem);
小demo
僅僅作為演示,響應(yīng)伸縮
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Calc</title>
<style type="text/css" media="screen">
html{
font-size:62.5%;
}
.wrapper{
width:100%;
border:5px solid #f00;
margin:10px ;
box-sizing:border-box;
height:200px;
clear:b;
}
.items{
height:calc(100% - 40px);
display:inline-block;
border:1px solid #f70;
text-align:center;
}
.w1 .items{
float:left;
margin-top:calc( 5 * 4px );
border:3px solid #0F16C6;
width:calc(100% / 3 - 6px)
}
.w2 .items{
float:left;
margin-top:calc(200px - 20px * 9);
width:calc(100% / 3 - 2px)
}
.w3 .items{
float:left;
width:calc(100% / 3 - (3 * 6px));
margin:calc(2px * 4 );
}
.w3 .items:first-child{
padding:calc(5 * 1rem - 3rem);
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="items">margin-top:calc( 5 * 4px );</div>
<div class="items">margin-top:calc( 5 * 4px );</div>
<div class="items">margin-top:calc( 5 * 4px );</div>
</div>
<div class="wrapper w2">
<div class="items">margin-top:calc(200px - 20px * 9);</div>
<div class="items">margin-top:calc(200px - 20px * 9);</div>
<div class="items">margin-top:calc(200px - 20px * 9);</div>
</div>
<div class="wrapper w3">
<div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div>
<div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
<div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
</div>
</body>
</html>
總結(jié)
calac 和flexbox搭配，用來寫流式布局非常好；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
calc()對(duì)大家來說，或許很陌生，不太會(huì)相信calc()是css中的部分。但它卻是就是css3的一部分，下面這篇文章主要給大家介紹了關(guān)于css3中calc函數(shù)的相關(guān)資料，文中通過示例代2018-07-10
巧用CSS3的calc()寬度計(jì)算做響應(yīng)模式布局的方法
本篇文章主要介紹了巧用CSS3的calc()寬度計(jì)算做響應(yīng)模式布局的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-22- 這篇文章主要介紹了詳解CSS 3 的 calc() 方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-01-12
淺談css3中calc在less編譯時(shí)被計(jì)算的解決辦法
這篇文章主要介紹了淺談css3中calc在less編譯時(shí)被計(jì)算的解決辦法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-04
CSS3 Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)問題
calc是css3的一個(gè)新功能，用來指定元素的長(zhǎng)度，calc()最大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度。接下來腳本之家小編給大家分享CSS3 Calc實(shí)現(xiàn)滾動(dòng)2017-09-14CSS3的calc()做響應(yīng)模式布局的實(shí)現(xiàn)方法
這篇文章主要介紹了 CSS3的calc()做響應(yīng)模式布局的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-09-06CSS3 函數(shù)技巧 用css 實(shí)現(xiàn)js實(shí)現(xiàn)的事情(clac Counters Tooltip)
這篇文章主要介紹了如何使用CSS3代碼更好實(shí)現(xiàn)js中效果，clac Counters Tooltip等功能使得代碼更為簡(jiǎn)潔明了,需要的朋友可以參考下2017-08-15深入理解CSS中的數(shù)學(xué)表達(dá)式calc()
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù)，主要用于數(shù)學(xué)運(yùn)算。這篇文章給大家介紹了CSS中的數(shù)學(xué)表達(dá)式calc()的相關(guān)知識(shí)，感興趣的朋友一起看看吧2020-01-19
