<meter id="vsqli"></meter><optgroup id="vsqli"><ruby id="vsqli"><i id="vsqli"></i></ruby></optgroup>
<output id="vsqli"></output>

    <pre id="vsqli"><meter id="vsqli"></meter></pre>

    1. <small id="vsqli"><strong id="vsqli"><del id="vsqli"></del></strong></small>

    2. <output id="vsqli"><ruby id="vsqli"></ruby></output>
      <big id="vsqli"></big>
      <code id="vsqli"></code>
        <big id="vsqli"><strong id="vsqli"></strong></big>
      1. <td id="vsqli"></td>

          <td id="vsqli"></td>
            
            

                  1. <dl id="vsqli"></dl>
                      <dl id="vsqli"></dl>
                      1. <dl id="vsqli"><ins id="vsqli"></ins></dl>

                          <dl id="vsqli"><ins id="vsqli"></ins></dl>

                        1. 返回舊版| 微信建站| 建站之家論壇| 我要建站 | 建站學習 | 加入收藏
                          站長投稿當前位置:首頁 > SEO教程 > 站長投稿 > 正文

                          利用css3的calc()屬性制作自適應布局

                          發布時間:2017-05-11 15:10:06   來源:   點擊:
                          在做自適應布局的時候,最常使用的解決方法就是在頁面初始化時,利用js去獲取寬高再計算。或者就是box-sizing。但接觸clac()以后發現,實現自適應原來可以如此簡單。

                          利用css3的calc()屬性制作自適應布局

                          calc()看起來像是一個函數,不太像是在css中的一部分。但它就是屬于css3的屬性,而且還可以運算。

                          什么是calc()?
                          其實calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。著作權歸作者所有。

                          calc()能做什么?
                          calc()說白了就是為dom元素提供計算,通過使用百分比、em、px、rem等長度單位值或像素單位值計算出滿足條件的寬高。如此一來,自適應的問題可以丟給瀏覽器去計算。加上使用box-sizing屬性,可以實現完美的布局。

                          calc()的使用方法和規則
                          calc()括號內使用普通的數學運算表達式,例如:加減乘除四則運算。數值可以使用幾乎所有長度單位。但如果沒有使用固定布局的元素,因其高度不定,故無法使用百分比進行計算。

                          語法注意事項
                          在表達式中使用加減運算符,運算符左右兩邊必須空格,否則會報錯。例如:width:calc(50% - 10px)。而乘除運算符可以不需要空格,但為了規范化,建議也跟加減運算符一致,左右添加空格。

                          瀏覽器的兼容性
                          市面上90%的PC瀏覽器都支持calc()這個屬性。IE9+、FF4.0+、Chrome19+、Safari6+都完美兼容,但是在不同內核的瀏覽器上,需要在其前面加上各瀏覽器廠商的識別符。而在移動端則不是很理想,因此推薦用于在pc操作頻繁的產品,例如財務系統,erp系統。
                          版權所有:鄭州騰石網絡科技有限公司 備案信息:豫ICP備18019117號
                          站長QQ:2863868475 業務合作咨詢:15137100750(同微信)
                          本站所有投放的廣告是有其他網站提供,不代表本站立場,同時網站首頁廣告位對外出租詳情咨詢本站站長!同時歡迎廣大站長加入個人建站團隊
                          • 建站客服
                          • CMS仿站
                          • CMS學習
                          • 技術交流群:336572814
                          云南11选5开奖结果