巧用CSS3的calc()寬度計(jì)算做響應(yīng)模式布局的方法

今天瀏覽這個(gè)http://www.sitepoint.com站時(shí),因?yàn)楹闷婵戳讼氯思覍懙拇a,結(jié)果發(fā)現(xiàn)了這行代碼,
于是就研究了一下,calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫,是css3的一個(gè)新增的功能,用來指定元素的長(zhǎng)度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值。為何說是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上,可以通過calc()計(jì)算得到元素的寬度。
calc()能做什么?
calc()能讓你給元素的做計(jì)算,你可以給一個(gè)div元素,使用百分比、em、px和rem單位值計(jì)算出其寬度或者高度,比如說“width:calc(50% + 2em)”,這樣一來你就不用考慮元素DIV的寬度值到底是多少,而把這個(gè)煩人的任務(wù)交由瀏覽器去計(jì)算。
calc()語法
calc()語法非常簡(jiǎn)單,就像我們小時(shí)候?qū)W加 (+)、減(-)、乘(*)、除(/)一樣,使用數(shù)學(xué)表達(dá)式來表示:
width: calc(expression);
其中”expression”是一個(gè)表達(dá)式,用來計(jì)算長(zhǎng)度的表達(dá)式。
calc()的運(yùn)算規(guī)則
calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則,但是也提供更智能的功能:
- 使用“+”、“-”、“*” 和 “/”四則運(yùn)算;
- 可以使用百分比、px、em、rem等單位;
- 可以混合使用各種單位進(jìn)行計(jì)算;
- 表達(dá)式中有“+”和“-”時(shí),其前后必須要有空格,如”widht: calc(12%+5em)”這種沒有空格的寫法是錯(cuò)誤的;
- 表達(dá)式中有“*”和“/”時(shí),其前后可以沒有空格,但建議留有空格。
瀏覽器的兼容性
我們來個(gè)例子,我們做一個(gè)三列并排的模塊,寬度按百分比、有padding值、有border值、還有margin-right,而且這三個(gè)值是px,
li{ float:left; width:33.3333%; height:50px; padding:10px; margin-right:10px; background:#FF6666; border:5px solid #DAC8A7; }
效果圖:
它是不會(huì)好好并列的,在這種情況下就不好算了,就算算出來也有那么一點(diǎn)誤差,不是嗎?現(xiàn)在我們就用到了calc(),
li{ float:left; //width:33.3333%; height:50px; padding:10px; margin-right:15px; background:#FF6666; border:5px solid #DAC8A7; width:calc(33.3333% - (10px + 5px) * 2 - 15px ) }
意思是(width-(padding+border)*2-margin)
現(xiàn)在可以并排了
好了,到這就告一段絡(luò)了,再稍微優(yōu)化一下左右邊15px的空距,讓兩邊都挨邊。就在父級(jí)上加個(gè)margin-right:-15px,OK 搞定,
現(xiàn)在拿這個(gè)去做響應(yīng)模式應(yīng)該很方便了,
還有一篇外國人寫的具體如何做大家有興趣的可以了解一下http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用CSS混合模式和SVG來動(dòng)態(tài)更改產(chǎn)品圖片的顏色
這篇文章主要介紹了使用CSS混合模式和SVG來動(dòng)態(tài)更改產(chǎn)品圖片的顏色,需要的朋友可以參考下2019-09-05使用CSS實(shí)現(xiàn)黑暗模式和高亮模式的切換功能
這兩個(gè)概念是來源于 macOS系統(tǒng) ,該系統(tǒng)為用戶提供兩個(gè)主題皮膚,即 高亮 和 暗色 系的皮膚。接下來通過本文給大家分享使用CSS實(shí)現(xiàn)黑暗模式和高亮模式的切換功能,感興趣的2019-06-14- 這篇文章主要介紹了CSS中元素的顯示模式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-24