整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
做自適應布局的時候，最常使用的解決方法就是在頁面初始化時，利用js去獲取寬高再計算。或者就是box-sizing。但接觸clac()以后發現，實現自適應原來可以如此簡單。
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系統。
SS calc() 屬性可以用來計算給定元素的寬度，可以根據其他元素的樣式設置來自動調整元素的寬度。
例如，如果要設置一個元素的寬度為父元素的 60%,可以使用以下代碼:
width: calc(60% - 2px); 其中，"-2px"是為了留出一些空格，以便與父元素的寬度對齊。這個屬性的意思是將元素的寬度設置為父元素的 60%,減去 2 像素的余數。
除了使用絕對值或百分比來設置寬度之外，還可以使用 CSS calc() 屬性來計算其他屬性。例如，要計算元素的高度，可以使用以下代碼:
height: calc(100% - 2px); 這個屬性的意思是將元素的高度設置為 100%,減去 2 像素的余數。
可以使用 calc() 函數計算任何差值，包括絕對值、百分比、長度值等等。例如:
width: calc(100% - 20px);
height: calc(50% - 10px);需要注意的是，CSS calc() 屬性只能用于基本樣式 (如 width、height、margin、padding 等),不能用于偽類 (如:hover、:first-child 等) 或屬性 (如 display、transform 等)。
我們非常專注寫代碼時候，我們往往會無意識的寫出一些無效CSS代碼。 我把這種稱為 “潛意識錯誤”。 導致這種錯誤后，我們經常會反問自己：“為什么我寫出這樣低級錯誤？” 不過，這些錯誤都比較好解決，不需要花很多時間，只要糾正一下就行了。
跟著本文看看，我會經常寫哪些有趣的 CSS 錯誤。
我在font-size和font-weight之間經常犯錯誤，如下所示：
.title {
font-size: bold;
}
我也不知道啥原因，但有時我會忘記寫百分比 ：
.title {
opacity: 50;
}
關于 opacity 我還經常犯下面錯誤：
.title {
/* 現這一點并不容易，你們看出錯誤在哪里嗎? */
opaciy: 0.5;
是 light 還是 lighter ?
.title {
font-weight: light;
}
當你認為屬性是padding，而實際上用的是padding-top時，就會發生這種情況:
.section {
padding-top: 10px 20px;
}
人才，優秀 。
對于 CSS Grid 有時我會潛意識的寫 grid-column 而不是 grid-template-columns :
.section {
grid-columns: 1fr 1fr 1fr;
}
對于 CSS 變量的使用，我也經常忘記寫 var ：
.title {
color: --brand-color;
}
正確的寫法如下：
.title {
color: var(--brand-color)
}
對于重置 box-shadow 我經常用 0 來重置：
.title {
/* 非法的 */
box-shadow: 0;
}
正確的寫法如下：
.title {
box-shadow: none;
}
隱藏元素可以使用 visibility，但我會經常這樣寫 ：
.title {
visibility: none;
}
正確的寫法如下：
.title {
visibility: hidden;
}
對于 width 有時會腦抽 ，這樣寫：
.title {
widows: 100px;
}
對于 css 偏移屬性，我也會經常這么寫:
.elem {
left: 14;
}
少了啥，大家自己體會 。
如果你的代碼沒有高亮的提示的功能，你也許也會這樣寫 ：
.elem {
font-size: clac(14px + 1vw);
}
我記得曾經遇到過這樣的錯誤 :
.elem {
color: #red;
}
不多說了，大家自己體會：
.title {
display: absolute;
}
.title {
translate: (-50%, -50%)
}
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint 原文：https://heydesigner.com/css-mistakes-on-autopilot/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
