calc 計算屬性calc 這個屬性可以達到什么效果呢？通過計算函數，可以在不刷新瀏覽器的情況下，實時的讓屬性值發生變化，我們一起看看 calc 的使用吧。 1. 官方定義calc() 函數用于動態計算長度值。 2. 解釋
3. 語法.demo{
/* property: calc(expression) */
width: calc( - px);
}解釋：demo 的寬度 = 父元素總體寬度 - 80px 。 4. 兼容性
5. 實例
.out-Box{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height:px;
width: calc( - px);
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out-Box{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height:px;
width: calc( - px) ;
}
</style>
</head>
<body>
<div class="out-Box">
<div class="demo">
網：計算函數學習
</div>
</div>
</body>
</html>
.out-Box{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( /);
width: calc( /);
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out-Box{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( /) ;
width: calc( /) ;
}
</style>
</head>
<body>
<div class="out-Box">
<div class="demo">
網：計算函數學習
</div>
</div>
</body>
</html>
.out-Box{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( ( + px) /);
width: calc( ( + px) /);
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out-Box{
border:px solid #ccc;
width: px;
height: px;
}
.demo{
border:px solid #ccc;
height: calc( ( + px) /) ;
width: calc( ( + px) /) ;
}
</style>
</head>
<body>
<div class="out-Box">
<div class="demo">
網：計算函數學習
</div>
</div>
</body>
</html>6. 經驗分享
calc( ( + px) /) 我們可以寫成 ： calc( / + px/)
|
