CSS中如何使用calc()函數(shù)

發(fā)布時(shí)間：2022-03-03 09:32:15 來源：億速云閱讀：151 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS中如何使用calc()函數(shù)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　首先我們來看看如何使用calc()函數(shù)？

　　我們使用calc函數(shù)都是通過指定計(jì)算公式來設(shè)置大小，比如：

　　width:calc(100px+50px);

　　或者

　　font-size:calc(3em+1em);

　　我們下面來看具體的示例

　　代碼如下

　　創(chuàng)建calc.html并編寫以下HTML文件

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>calc的用法</title>

　　<styletype="text/css">

　　body{

　　width:800px;

　　}

　　.calc_div{

　　width:calc(100%-500px);

　　height:calc(100%-500px);

　　color:rgb(255,0,0);

　　}

　　.font{

　　font-size:3em;

　　}

　　.calc_font{

　　font-size:calc(3em+2em);

　　color:rgb(255,0,0);

　　}

　　</style>

　　</head>

　　<body>

　　<div>

　　這是一個(gè)未使用calc的div。

　　</div>

　　<divclass="calc_div">

　　這是一個(gè)使用了calc的div。

　　</div>

　　<divclass="font">

　　這是設(shè)置了3em的div

　　</div>

　　<divclass="calc_font">

　　這是一個(gè)設(shè)置了calc(3em+2em)的div

　　</div>

　　</body>

　　</html>

以上是“CSS中如何使用calc()函數(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS中如何使用calc()函數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽