css學習1
css學習1
目錄1.px，em ,rem,
css支援幾種絕對長度單位，最常用、最基礎的是畫素（px）。
css帶來的抽象性帶來了額外的複雜性。相對單位就是css用來解決這種抽象的一種工具。我們可以基於視窗大小來等比例地縮放字號，而不是固定為14px，或者將網頁上的任何元素的大小都相對於基礎字號來設定，然後只用修改一行程式碼就能縮放整個網頁。
em是最常見的相對長度單位。在css中，1em等於當前元素的字號，其準確值取決於作用的元素。
當設定padding,height,width,border-radius等屬性時，使用em會很方便。這是因為當元素繼承了不同的字號，或者使用者改變了字型設定時，這些屬性會跟著元素均勻地縮放。
當前元素的字號決定了em。
rem是root em的縮寫。rem不是相對於當前元素，而是相對於根元素的單位。不管在文件中的什麼位置使用rem，1.2rem都會有相同的計算值：1.2乘以根元素的字號。
瀏覽器的預設字號是16px。
當瀏覽器解析HTML文件時，會在記憶體裡將頁面的所有元素表示為DOM（文件物件模型）。它是一個樹結構，其中每個元素都由一個節點表示。html元素是頂級（根）節點。它下面是子節點，head和body，再下面是逐級巢狀的後代節點。 在文件中，根節點是所有其他元素的祖先節點。根節點有一個偽類選擇器（:root），可以用來選中它自己。這等價於型別選擇器html，但是html的優先順序相當於一個類名，而不是一個標籤。
在css裡面，什麼時候用px,em和rem呢。掌握css的一個特點是學會在適當的場景使用適當的工具。一般用rem設定字號，用px設定邊框，用em設定其他大部分屬性，尤其是內邊距、外邊距和圓角。
這樣字號是可預測的，同時還能在其他因素改變元素字號時，藉助em縮放內外邊距。用px定義邊框也很好用。
如果希望預設字號為14px，那麼不要講預設字型設定為10px然後再覆蓋一遍，而應該直接將根元素字號設定為想要的值，將想要的值除以繼承值 （瀏覽器預設值）為14/16，等於0.875.
如下：
: root {
font-size:0.875em;
}
2.動態改變自定義屬性
html檔案如下：（可以使用js動態改變對應的自定義屬性值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./2-3.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var root=document.documentElement;
var styles=getComputedStyle(root);
var mainColor=styles.getPropertyValue('--main-bg');
console.log(String(mainColor).trim());
document.documentElement.style.setProperty('--main-bg','#cdf');
</script>
</head>
<body>
<div class="panel">
<h2>Single-origin</h2>
<div class="body">
We have built partnerships with small farms aroud the world to hanle-select beans at the peek of season.We
then carefully roast in small batches to maximize their potential;
</div>
</div>
<aside class="dark">
<div class="panel">
<h2>Single-origin</h2>
<div class="body">
We have built partnerships with small farms aroud the world to hanle-select beans at the peek of season.We
then carefully roast in small batches to maximize their potential;
</div>
</div>
</aside>
</body>
</html>
css檔案如下：
:root {
--main-bg:#fff;
--main-color:#000;
}
.panel {
font-size: 1rem;
padding: 1em;
border: 1px solid #999;
background-color: var(--main-bg);
color: var(--main-color);
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.dark {
margin-top: 2rem;
padding: 1em;
background-color: #999;
--main-bg:#333;
--main-color:#fff;
}
自定義屬性是css中一個全新的領域，開發人員剛開始探索。因為瀏覽器支援有限，所以還沒有出現典型的用法。
值得注意的是，任何使用var()的宣告都會被忽略。請儘量為這些瀏覽器提供回退方案。