css3 calc會計算的屬性

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

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

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

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

注意在寫calc表達式中

width: calc(50% - 20px);

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

這是calc瀏覽器支持情況。

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

@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云服務器 calc Calces java 中calc 按天算的云服務器

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50223.html

相關(guān)文章

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

摘要：除了增加了一個結(jié)構(gòu)，但是相對與一個頁面成百上千的代碼來說，不值一提我們知道，容器如果不給定高度，它的高度會隨著容器內(nèi)部的元素變化而撐大，這個時候，我們在容器內(nèi)部添加一張符合我們寬高比例的圖片，給圖片設置寬度高度。使用一個隱藏的圖片來實現(xiàn) 這個方法是我最推薦的，因為不需要考慮任何兼容性，PC移動完美運行。除了增加了一個dom結(jié)構(gòu)，但是相對與一個頁面成百上千的代碼來說，不值一提我們知道...

vslam 2019-08-29 11:09 評論0 收藏0
響應式設計中百分比 % 的問題

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

wangym 2019-08-30 13:02 評論0 收藏0
CSS基礎篇--CSS3 calc實現(xiàn)滾動條出現(xiàn)頁面不跳動

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

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

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

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

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

lijy91 2019-08-29 12:34 評論0 收藏0