詳解CSS 3 中的 calc() 方法
我要評(píng)論下面一段代碼給大家介紹css3中的calc()方法，具體內(nèi)容如下所示：
<div style="width:100px; height:50px; background:red;"> <div style="width:100%; height:20px; margin:5px; background:green;"></div> </div>
[Ctrl+A 全部選擇 提示：您可先修改部分代碼，再按運(yùn)行]
如上代碼，預(yù)覽可以看出紅色框超出了，因?yàn)樵跇?biāo)準(zhǔn)的 CSS 中，width 是不包含 margin 的（老 IE 中 width 是包含 margin 的）。
為了達(dá)到上述效果，我們一般會(huì)在中間再套一層 div（有人說(shuō)，不是把 width:100% 取了就可以了么？冷靜，我們是舉例，實(shí)際有些情況下，不能取消 width:100%。）
有沒(méi)有更方便的呢？用 calc() 吧。
<div style="width:100px; height:50px; background:red;"> <div style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></div> </div>
[Ctrl+A 全部選擇 提示：您可先修改部分代碼，再按運(yùn)行]
使用說(shuō)明
- 支持：+、-、*、/，支持混用
- 支持：%、px、em、rem 等
- +、- 前后必須要有空格，比如：calc(100%-10px) 是不正確的，應(yīng)該改為：calc(100% - 10px)
- *、/ 前后可以不要空格，但建議有。
支持性
主流的桌面瀏覽器都支持。據(jù)說(shuō)手機(jī)瀏覽器幾乎不支持。
總結(jié)
以上所述是小編給大家介紹的CSS 3 中的 calc() 方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
calc()對(duì)大家來(lái)說(shuō)，或許很陌生，不太會(huì)相信calc()是css中的部分。但它卻是就是css3的一部分，下面這篇文章主要給大家介紹了關(guān)于css3中calc函數(shù)的相關(guān)資料，文中通過(guò)示例代2018-07-10
巧用CSS3的calc()寬度計(jì)算做響應(yīng)模式布局的方法
本篇文章主要介紹了巧用CSS3的calc()寬度計(jì)算做響應(yīng)模式布局的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-22
這篇文章主要介紹了CSS3 calc()會(huì)計(jì)算屬性詳解的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-27淺談css3中calc在less編譯時(shí)被計(jì)算的解決辦法
這篇文章主要介紹了淺談css3中calc在less編譯時(shí)被計(jì)算的解決辦法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-04
CSS3 Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)問(wèn)題
calc是css3的一個(gè)新功能，用來(lái)指定元素的長(zhǎng)度，calc()最大的好處就是用在流體布局上，可以通過(guò)calc()計(jì)算得到元素的寬度。接下來(lái)腳本之家小編給大家分享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
