css3 calc會(huì)計(jì)算的屬性

SegmentFault 發(fā)布于2019-08-01 15:57 / 1969人閱讀

摘要：是英文單詞計(jì)算的縮寫(xiě)，是的一個(gè)新增的功能，你可以使用給元素的和等屬性設(shè)置動(dòng)態(tài)值。可以使用數(shù)學(xué)運(yùn)算中的簡(jiǎn)單加減乘和除來(lái)解決問(wèn)題，而且還可以根據(jù)單位如和百分比來(lái)轉(zhuǎn)化計(jì)算。注意在寫(xiě)表達(dá)式中右側(cè)要有空格，否則這行代碼無(wú)效。這是瀏覽器支持情況。

calc是英文單詞calculate(計(jì)算)的縮寫(xiě)，是css3的一個(gè)新增的功能，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值。

calc()可以使用數(shù)學(xué)運(yùn)算中的簡(jiǎn)單加（+）、減（-）、乘（*）和除（/）來(lái)解決問(wèn)題，而且還可以根據(jù)單位如px,em,rem和百分比來(lái)轉(zhuǎn)化計(jì)算。

注意在寫(xiě)calc表達(dá)式中

width: calc(50% - 20px);

-右側(cè)要有空格，否則這行代碼無(wú)效。

這是calc瀏覽器支持情況。

例子：必須使用設(shè)置百分比頁(yè)面同時(shí)又有margin時(shí)，會(huì)出現(xiàn)不夠滿擠到下一行的情況，所以要用到calc重新計(jì)算百分比

@media screen and (min-width:768px){
    .col-sm-1{
        width: calc(8.1% - 20px);
    }
    .col-sm-2{
        width: calc(16.7% - 20px);
    }
    .col-sm-3{
        width: calc(25% - 20px);
    }
    .col-sm-4{
        width: calc(33.3% - 20px);
    }
    .col-sm-6{
        width: calc(50%- 20px);
    }
    .col-sm-12{
        width: calc(100% - 20px);
    }
}

GPU云服務(wù)器云服務(wù)器 calc Calces java 中calc 按天算的云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/50223.html

相關(guān)文章

純css實(shí)現(xiàn)容器高度隨寬度等比例變化的四種解決方案

摘要：除了增加了一個(gè)結(jié)構(gòu)，但是相對(duì)與一個(gè)頁(yè)面成百上千的代碼來(lái)說(shuō)，不值一提我們知道，容器如果不給定高度，它的高度會(huì)隨著容器內(nèi)部的元素變化而撐大，這個(gè)時(shí)候，我們?cè)谌萜鲀?nèi)部添加一張符合我們寬高比例的圖片，給圖片設(shè)置寬度高度。使用一個(gè)隱藏的圖片來(lái)實(shí)現(xiàn) 這個(gè)方法是我最推薦的，因?yàn)椴恍枰紤]任何兼容性，PC移動(dòng)完美運(yùn)行。除了增加了一個(gè)dom結(jié)構(gòu)，但是相對(duì)與一個(gè)頁(yè)面成百上千的代碼來(lái)說(shuō)，不值一提我們知道...

vslam 2019-08-29 11:09 評(píng)論0 收藏0
響應(yīng)式設(shè)計(jì)中百分比 % 的問(wèn)題

摘要：響應(yīng)式自適應(yīng)響應(yīng)式和自適應(yīng)設(shè)計(jì)共同點(diǎn)都是要處理在不同裝置下瀏覽網(wǎng)頁(yè)的問(wèn)題，可讀性，版型等等。關(guān)於由於我們?nèi)詴?huì)在的設(shè)計(jì)中使用百分比，如此一來(lái)或多或少還是會(huì)受到進(jìn)位誤差的影響，因此並不是佈局的萬(wàn)能藥。 showImg(https://segmentfault.com/img/remote/1460000006786975); 問(wèn)題為了要能夠解釋得更清楚我們需要實(shí)作一小段跟我們會(huì)遇到的問(wèn)題...

wangym 2019-08-30 13:02 評(píng)論0 收藏0
CSS基礎(chǔ)篇--CSS3 calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)

摘要：不過(guò)最大的好處就是用在流體布局上，可以通過(guò)計(jì)算得到元素的寬度。于是，就是瀏覽器滾動(dòng)條的寬度大小如果有，如果沒(méi)有滾動(dòng)條則是左右都有一個(gè)滾動(dòng)條寬度或都是被占用，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦，從而沒(méi)有任何跳動(dòng)參考的使用什么是calc()? calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫(xiě)，是css3的一個(gè)新增的功能，用來(lái)...

894974231 2019-08-30 13:45 評(píng)論0 收藏0
WEB前端資源代碼：CSS篇

摘要：誤區(qū)注意只是動(dòng)態(tài)分配父元素的剩余空間，而不是整個(gè)父元素的空間。默認(rèn)值如果項(xiàng)目未設(shè)置高度或設(shè)為，將占滿整個(gè)容器的高度。負(fù)值對(duì)該屬性無(wú)效。高像素密度設(shè)備相應(yīng)放大，像素密度設(shè)備相應(yīng)縮小。css3新單位vw、vh、vmin、vmax vh: 相對(duì)于視窗的高度, 視窗被均分為100單位的vh; vw: 相對(duì)于視窗的寬度, 視窗被均分為100單位的vw; vmax: 相對(duì)于視窗的寬度或高度中較大的那...

番茄西紅柿 2019-04-23 13:15 評(píng)論0 收藏0
CSS題目及答案整理

摘要：解決方案為加上使其形成，根據(jù)規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算的元素的高度，達(dá)到清除浮動(dòng)影響的效果。并為這個(gè)外層元素設(shè)置，使其形成。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為項(xiàng)目，簡(jiǎn)稱(chēng)項(xiàng)目。原文鏈接在這里 CSS 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有兩種， IE 盒子模型（相當(dāng)于box-sizing: bor...

lijy91 2019-08-29 12:34 評(píng)論0 收藏0