css3的calc 實現自適應布局

隨著自適應布局的出現，我們在製作頁面的時候，經常會碰到元素的寬度為100%的情況。了解盒模型的朋友不難想到，如果這個元素有margin，padding，border的時候，此時的元素整體寬度必會大於父級元素的寬，就會導致頁面結構錯亂等一系列布局問題。為了解決這種問題，我可以通過calc()來實現。

首先calc是calculate(計算)的縮寫，其次看起來像是乙個函式，它是css3新增的乙個功能，用來指定元素的長度，而且是通過計算來指定，因此不用擔心新增邊距或者邊框帶來的問題。

既然calc()能通過計算設定元素的長度，那怎麼去實現呢？

我們知道元素可以通過百分比、px等單位定義高寬，而calc()可以通過計算得出高寬。如下：

width: calc(100% - 10px);

可以混合使用百分比、em、px、rem等單位進行計算

注意運算子前後使用空格

上面的用法是不是很簡單呢，那我們來看乙個完整的例項：

說明：以下示例只展示calc用法及效果，實際專案根據需求取最優實現方式。

html**片段

class="box1">div>

class="box2">div>

div>

css**片段

從上面例項不難看出，box1和box2的區別就在於寬度的定義，在box2中，我們把padding和border的橫向值去掉後，calc()計算出來的寬度才是我們想要的值。到can i use**檢視相容瀏覽器情況

在less中使用calc()編譯後則會發現引數是按運算子計算後的結果，需特別注意如下：

less**片段

width: calc(100% - 10px);

編譯後如下：

css**片段

width: calc(90%);

從以上**可以看出，在less中使用時需另作處理如下：

less**片段

width

: calc(~"100% - 10px");

編譯後如下：

css**片段

width: calc(100% - 10px);

css3屬性calc 實現自適應布局

如果元素寬度是100 時，只要你在元素中新增了border,padding,margin任何一值，都會把元素盒子撐破 標準模式下，除ie怪異模式 css3新新增屬性box sizing，在一定程度上解決了上面的問題。通過css3新增加的另外乙個屬性calc 也能實現自適應布局。calc 使用通用的數...

CSS3響應自適應布局Media Queries

media queries是css3新增加的乙個模組功能，其最大的特色就是通過css3來查詢 然後呼叫對應的樣式。在徹底地了解media queries之前，我們需要了解其中的兩個重要部分，第乙個是 型別，第二個是 特性。型別 media type 在css2中是乙個常見的屬性，可以通過 型別對不同...

css3自適應布局單位vw,vh

視口單位 viewport units 什麼是視口？在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 桌面端指的是瀏覽器的可...