<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css3中樣式計算屬性calc()的使用和總結

          時間:?2017-12-19閱讀:?14971標簽:?css3

          calc的介紹

          在css3樣式中有一個類似與函數的計算屬性calc(),它主要用于指定元素的長度,無論是border、margin、pading、font-size和width等屬性都可以使用calc來設置動態值。calc支持的運算單位有rem , em , %, px,calc是支持單位的混合使用的,其計算優先級別和數學一致。


          calc的用法  

          .elm{
                  width:calc(expression);
          }

          其中,expression是一個用來計算長度的表達式,支持“+”,“-”,“*”,“/”運算符。


          注意1: 表達式中有“+”和“-”時,其前后必須要有空格,如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的;而對于“*”,“/”并沒有這種要求,但為了風格的統一,建議前后也要留空格。例如:

          width: calc(100% -8px); /* 這樣會出錯,結果為0 */
          width: calc(100% - 8px); /* 當 + -  符號用空格隔開時,運算成功 */


          注意2:使用 * / 運算符時,必須保證有一個值為數值類型;


          calc的兼容:

          在IE9+、FF4.0+、Chrome19+、Safari6+支持較好,移動端支持不理想。 如圖: 


          兼容性前綴: 

          .elm{
            width: calc(80% - 10px);
            width: -moz-calc(80% - 10px);   /*Firefox*/
            width: -webkit-calc(80% - 10px);   /*chrome safari*/
          }


          在less如何使用

          由于less中會把它當表達式計算掉了,需要在參數外面加上: ~("expression"),如: 

          .elm{
            width: calc(~"100% - 80px");
          }

          或者使用e(“”)包裹在里面,如:

          width:e("calc(100% - 80px)");

          可如果要用變量怎么用呢?也不復雜,像下面這樣就搞定啦。 

          .class {
            @cap: 50px;
            height: calc(~"100% - @{cap}");
          }


          calc實現適應布局例子

          必須使用設置百分比頁面同時又有margin時,會出現不夠滿擠到下一行的情況,所以要用到calc重新計算百分比

          <div class="container">
              <div class="row">
                  <div class="col-sm-4 col-xs-6"></div>
                  <div class="col-sm-4 col-xs-6"></div>
                  <div class="col-sm-4 col-xs-12"></div>
              </div>
              <div class="row">
                  <div class="col-sm-3 col-xs-3"></div>
                  <div class="col-sm-6 col-xs-6"></div>
                  <div class="col-sm-3 col-xs-3"></div>
              </div>
              <div class="row">
                  <div class="col-sm-1 col-xs-2"></div>
                  <div class="col-sm-1 col-xs-2"></div>
                  <div class="col-sm-2 col-xs-8"></div>
                  <div class="col-sm-2 col-xs-3"></div>
                  <div class="col-sm-6 col-xs-3"></div>
              </div>    
          </div>
          @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);
              }
          }


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/256

          理解 CSS3中 object-fit

          在檢查網站的時候發現圖片給于固定寬的時候,會壓縮變形,要保證,img元素不變形,寬高比不變。從別人那里了解到object-fit,以前從未用過,所以就總結給自己看看,理解一下。

          css3常用動效以及總結

          box-shadow:盒子陰影,可以給卡片添加提高美化效果。可廣泛應用于內容展示頁面。css3 過渡:最簡單的過渡是一個div,給它加上如下代碼,便可以從寬度100px華麗的過渡到寬度為300px。

          css3新特性總結

          css3新特性總結:圓角邊框、多背景圖、顏色和透明度(由原來的rgb到現在的rgba)、多列布局和彈性盒模型、盒子的變幻(2D、3D)、過渡和動畫、引入web字體(在服務器端存儲)、媒體查詢、陰影

          用CSS3實現無限循環的無縫滾動

          使在頁面中循環展示信息的功能之前一般是用js來實現的,那么用CSS3該如何實現實現呢;使用CSS來進行動畫的展示,會讓頁面顯得更加流暢。如果能用CSS實現,可以嘗試盡量用CSS實現下

          css3中計數器的使用

          css3里有個很強大的功能,就是計算器,使用它可以很方便對頁面中的任意元素進行計數,實現類似于有序列表的功能。與有序列表相比,突出特性在于可以對任意元素計數,同時實現個性化計數。

          css3特效_CSS3彈跳Loading加載動畫特效的實現

          今天給大家分享一款非常常用的css 加載動畫,這款CSS3 Loading動畫主要由幾個小球通過規律的上下跳動,漸隱漸顯而成,效果十分不錯。尤其在移動端中使用,基本代替了圖片來實現加載的效果。

          CSS3中一些鮮為人知的屬性

          CSS3是CSS(層疊樣式表)技術的升級版本,CSS3規范里的元素能以不同速度向前發展,因為不同的瀏覽器廠商只支持給定特性。這篇文章主要整理一些關于css3中的鮮為人知的屬性

          CSS3 動畫性能優化

          CSS3 動畫給 Web 的用戶體驗帶來了巨大提升,本文將嘗試從瀏覽器渲染的角度,來解析動畫優化的原理及其技巧。為大家提供一些動畫性能優化的參考。

          css3實現背景圖片顏色修改的多種方式

          css3可以改變圖片的顏色了。從此再也不用設計出多張圖,而且隨時可以修改。下面就簡單介紹下css3中是如何做到改變背景圖片的顏色效果的。

          純css3實現餅狀圖

          網頁中,有時候會碰到餅狀圖的需求,比如統計圖表,進度指示器,定時器等,實現方式也是各種各樣,現在也有不少現成的js庫,可以直接拿來使用,方便很多。這里筆者為大家演示一種純css實現餅狀圖效果的方法。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网