css3屬性calc 實現自適應布局

如果元素寬度是100%時，只要你在元素中新增了border,padding,margin任何一值，都會把元素盒子撐破（標準模式下，除ie怪異模式）。css3新新增屬性box-sizing，在一定程度上解決了上面的問題。

通過css3新增加的另外乙個屬性calc()也能實現自適應布局。

calc()使用通用的數**算規則：

使用「+」、「-」、「*」 和 「/」四則運算；

可以使用百分比、px、em、rem等單位；

可以混合使用各種單位進行計算；

表示式中有「+」和「-」時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

表示式中有「*」和「/」時，其前後可以沒有空格，但建議留有空格。

瀏覽器的相容性

pc端在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，使用時需要加瀏覽器字首；

移動端的瀏覽器僅有「firefox for android 14.0」支援。

.elm

其中"expression"是乙個表示式，用來計算長度的表示式。

.container

viewport：可視視窗，也就是瀏覽器。vw：viewport寬度， 1vw 等於viewport寬度的1%

vh：viewport高度， 1vh 等於viewport高的的1%

.container

css3的calc 實現自適應布局

隨著自適應布局的出現，我們在製作頁面的時候，經常會碰到元素的寬度為100 的情況。了解盒模型的朋友不難想到，如果這個元素有margin，padding，border的時候，此時的元素整體寬度必會大於父級元素的寬，就會導致頁面結構錯亂等一系列布局問題。為了解決這種問題，我可以通過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 理想視口 視口單位中的 視口 桌面端指的是瀏覽器的可...