CSS的值和單位

我們知道，CSS是由屬性和屬性值所組成的表

隨著CSS的發(fā)展，屬性不說幾千也有幾百，我從來不支持去背誦所有的可能性。我們應(yīng)該去了解底層的邏輯，了解是什么導(dǎo)致我們最終看到了這樣的樣式，從而在我們面對(duì)不同需求時(shí)給予我們以不同的思路

那不聊屬性，就先聊聊屬性值吧

屬性值

.content {max-width: 1080px;margin: 0 auto;
}

css的屬性值是很多樣的

• 他可能是帶有特殊含義的關(guān)鍵字就像 inherit、initial 或者 auto 這樣的

• 也可以是不帶單位的數(shù)字

  • 用于表示距離和百分比的0可以不帶單位（因?yàn)榫退銕Я藛挝?#xff0c;他們的含義也沒有區(qū)別）

    像這樣

    body {margin: 0;padding: 0;
    }.A{height: 0;
    }.B{position:absolute;top:0;left:0;bottom:0;right:0;
    }
    

  • 一些屬性也是允許無單位值的

    比如 z-index、line-height、opacity等

• 最常見的，他是一個(gè)帶有單位的值

長度單位

CSS和絕對(duì)單位

CSS中的絕對(duì)單位，其實(shí)一個(gè)詞就能講完——px

我們的屏幕的分辨率就是用像素做單位，那用像素不是最好的選擇嗎？

可惜答案是否定的

css中的px跟分辨率的像素是有所不同的，嚴(yán)格來說CSS的1px并不等同于屏幕的1px，更何況不同的的設(shè)備和用戶設(shè)定更是會(huì)渲染出不同的結(jié)果

雖然上第一節(jié)前端課的時(shí)候老師就告訴我們 $1英寸（這個(gè)是物理長度）=96px$

但是現(xiàn)在我們知道了，這就是個(gè)大概值，如果你迷信他，到時(shí)候會(huì)吃虧的。該用英寸的時(shí)候，就直接用英寸

除了px以外，其實(shí)CSS還允許很多絕對(duì)單位，他們其中絕大多數(shù)都是印刷行業(yè)常用的單位。雖然在渲染網(wǎng)頁的時(shí)候他們絕大多數(shù)情況下都幫不了你什么忙，但如果你要渲染一個(gè)專門用于打印的頁面時(shí)，他們就會(huì)大顯神威：

單位	名稱	等價(jià)換算
cm	厘米	1cm = 37.8px = 25.2/64in
mm	毫米	1mm = 0.1 cm
Q	四分之一毫米	1Q = 0.25 mm = 0.025 cm
in	英寸	1in = 2.54cm = 96px
pc	派卡（印刷用）	1pc = 1/6 in = 12 pt
pt	點(diǎn)（點(diǎn)）	1pt = 1/72 in

在編輯排版工作中，為了方便計(jì)算一行內(nèi)能排多少字符，往往使用“字符每派卡”（cpp，characters per pica）描述字體的大小。由于西文字體多為比例寬度，多帶有零碎的小數(shù)、分?jǐn)?shù)數(shù)值，比如某個(gè)版本 11 點(diǎn)大小的 Helvetica 會(huì)被記做 2.4 cpp，意即“1派卡里可排 2.4 個(gè)字符”。有了這個(gè)數(shù)值，排印人員就可以方便地計(jì)算，在通常一本八開（6×8 英寸）的書籍里排5英寸長的字行（5英寸=30派卡）可以容納 2.4 × 30 = 72 個(gè)字

CSS和相對(duì)單位

在很多年前，繪制一個(gè)HTML頁面跟規(guī)劃一張報(bào)紙的版面沒有什么區(qū)別 也許這就是為什么CSS會(huì)支持這么多排版單位的原因吧。因?yàn)殚_發(fā)者們知道用戶會(huì)用什么設(shè)備來訪問這個(gè)頁面，畫布是固定大小的，所以所有元素的尺寸都可以寫死他。哪怕屏幕分辨率在后來越來越大，開發(fā)者們想出了類似前面的 .content 的解決方案：既然畫布一直在變大，那我就自己定義一個(gè)畫布，規(guī)定他的最大值。然后讓他居中顯示，把所有的內(nèi)容都寫到里面去，即使在高分辨率的屏幕上整個(gè)頁面看起來就像一根矗立在屏幕中央的棍子

直到iphone4誕生，徹底改變?nèi)藗儗?duì)“上網(wǎng)”這個(gè)行為的思維方式。原來我們可以在一個(gè)方磚大小的設(shè)備上訪問頁面，那我們將來是不是可以在一個(gè)幾十上百寸的巨幕上訪問頁面？在一張A4紙大小的板子上訪問頁面？

人們用千奇百怪的設(shè)備訪問你的網(wǎng)頁，這時(shí)候如果你依然墨守成規(guī)，那就只能在用戶糟糕體驗(yàn)之后的唾棄聲中抱著你的電腦屏幕退場(chǎng)

百分比

這個(gè)應(yīng)該不需要解釋了吧？就像這樣：

<div class="f"><div class="A">A</div><div class="B">B</div>
</div><style>.f {background: gray;}.f > * {float: left;}.f::after {content: "";display: block;clear: both;}.A {width: 10%;/*占f的十分之一寬度*/background: red;}.B {width: 50%;/*占f的一半寬度*/background: yellow;}
</style>

這個(gè)其實(shí)不能屬于相對(duì)單位那一類，他甚至都不能算單位

但是最早前輩們剛開始想搞響應(yīng)式布局的時(shí)候，最先想到的就是用百分比

如果你用過一些前端樣式框架，比如說 bootstrap 、 layui 或者 Element-plus(Element-ui)。你就會(huì)發(fā)現(xiàn)他們?cè)诓季值臅r(shí)候基本都有一個(gè)柵格化類

就是把一個(gè)容器切割成N份（N=12的居多），然后你根據(jù)調(diào)用不同的柵格類-數(shù)字來讓子元素占據(jù)對(duì)應(yīng)的寬度

在 flexbox 出現(xiàn)之前，幾乎全都是用類似上面那個(gè)例子一樣的方式實(shí)現(xiàn)的

em & rem

所謂相對(duì)單位，說白了就是這個(gè)單位是依附于其他東西的

他不像絕對(duì)單位，雖然我們說px在不同情況下的長度略有差異，可是只要你定義了這個(gè)屬性，那么他就一定是這么長，無論周圍的東西怎么變動(dòng)都不會(huì)影響

但相對(duì)單位是可能你沒有變動(dòng)他自身，但是他相對(duì)的東西的長度變動(dòng)了，所以他就跟著變動(dòng)了（這個(gè)其實(shí)就跟百分比差不多）

em和rem，這倆就是正兒八經(jīng)的相對(duì)單位了

其實(shí)也很簡(jiǎn)單，一句話也能說完：

em是相對(duì)于父元素的字體大小的倍數(shù)；rem是相對(duì)于根元素的字體大小的倍數(shù)(r代表root)

但這是針對(duì)你用em來設(shè)定字體大小的時(shí)候，如果你用em設(shè)定的不是字體大小，那么他的參照物就會(huì)變成 當(dāng)前元素的字體大小

em

em最直接的用法是當(dāng)你想要在一段文字中突出某個(gè)大字號(hào)標(biāo)題的時(shí)候使用，就像這樣：

<div class="word"><p class="title">我是標(biāo)題</p>巴拉巴拉        巴拉巴拉        巴拉巴拉        巴拉巴拉
</div><style>.word{font-size: 16px;}.title{font-size: 2em;}
</style>

我們通過2em這個(gè)設(shè)定讓 title類 字體大小變成 word類 字體的兩倍，這種寫法是有意義的，當(dāng)我們修改整段文字的字體大小的時(shí)候，可以只修改外層的word類的大小

通常我們用這種方式設(shè)定所有元素的字體大小，然后根據(jù)實(shí)際的分辨率來設(shè)定根元素的字體大小，已實(shí)現(xiàn)對(duì)整個(gè)頁面的字體大小的動(dòng)態(tài)控制

如果對(duì)根元素使用em呢？

你知道瀏覽器有個(gè)標(biāo)準(zhǔn)字體大小的伐

如果你對(duì)根元素使用em，就會(huì)以瀏覽器標(biāo)準(zhǔn)字體來計(jì)算

不過事實(shí)上現(xiàn)在我們最常見的對(duì)em的用法不是用他來設(shè)定字體，而是用他來設(shè)定邊距，就像這樣：

<div class="box A">A
</div>
<div class="box B">B
</div><style>.box{display: inline-block;padding: 2em;}.A {font-size: 16px;background: red;}.B {font-size: 32px;background: green;}
</style>

這樣一來無論我把這兩個(gè)方塊的字體大小如何設(shè)定，他們的邊距都會(huì)是當(dāng)前字體大小的兩倍

rem

rem跟em幾乎是一樣的，區(qū)別在于他的參照物永遠(yuǎn)都是根元素。在html文檔中，這個(gè)根元素其實(shí)就是html標(biāo)簽

不過除此之外，CSS還提供了一個(gè)叫 :root 的偽類選擇器讓你選擇根元素，我個(gè)人建議你用這個(gè)偽類選擇器來選中根元素

就像這樣：

<p>這是標(biāo)準(zhǔn)器默認(rèn)字體大小的一句話</p>
<p style="font-size: 1.5em">1.5em</p>
<div style="font-size: 2em"><p style="font-size: 1em">父元素2em時(shí)的1em</p>
</div>
<p style="font-size: 1.5rem">1.5rem</p>
<div style="font-size: 2em"><p style="font-size: 1rem">父元素2em時(shí)的1rem</p>
</div><style>:root{font-size: 8px;}
</style>

視口

視口，就是指瀏覽器窗口里網(wǎng)頁可見部分的邊框區(qū)域

JavaScript中的視口（inner- 和 outer-）

在JavaScript里面，我們可以通過 inner- 和 outer- 來獲取html渲染區(qū)域尺寸和瀏覽器窗口尺寸，就像這樣：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn">打印窗口尺寸</button>
</body>
</html><script>(function () {document.getElementById("btn").onclick = function () {console.log(`innerHeight`, window.innerHeight, `innerWidth`, window.innerWidth);console.log(`outerHeight`, window.outerHeight, `outerWidth`, window.outerWidth);console.log("**************************************");};})()
</script>

這里發(fā)生了很有意思的事情

在一開始，我拉動(dòng)了F12彈出的調(diào)試工具的大小，這時(shí)候innerWidth變小了，但是outerWidth無動(dòng)于衷。但是當(dāng)我讓調(diào)試工具彈出來，同時(shí)縮小瀏覽器窗口大小時(shí)，我們看到outerWidth變小了，但是innerWidth反而變大了

會(huì)出現(xiàn)這樣的情況只有一種解釋，那就是inner-返回的是html頁面當(dāng)前可用的渲染區(qū)域的尺寸，而outer-返回的是整個(gè)瀏覽器窗口的尺寸，就像這樣：

顯然，inner- 所代表的就是我們說的視口

值得注意的是 inner- 的尺寸是包含滾動(dòng)條的尺寸的，所以如果你用這個(gè)屬性讓某個(gè)容器占滿整個(gè)頁面的高度/寬度，那么在滾動(dòng)條出現(xiàn)的情況下可能會(huì)出現(xiàn)很詭異的情形，就像這樣：

<div id="test"><div style="height: 10px;width: 10000px"></div>
</div><style>body{margin: 0;padding: 0;}div{width: 200px;background: green;}
</style><script>(function(){document.getElementById("test").style.height = window.innerHeight + "px";})()
</script>

如我們所料，橫向的滾動(dòng)條出現(xiàn)了，這是因?yàn)槲覀冇幸粋€(gè)寬度為10000px的div，這遠(yuǎn)遠(yuǎn)超過我們的視口，所以橫向滾動(dòng)條出現(xiàn)了

但是縱向滾動(dòng)條為什么會(huì)出現(xiàn)呢？明明test的高度等同于視口啊？

因?yàn)槲覀兊囊暱谑前瑵L動(dòng)條的，也就是說這樣：

橫向滾動(dòng)條剛好擋住了一部分test的內(nèi)容，所以縱向滾動(dòng)條出現(xiàn)了，而且可以滾動(dòng)的距離剛好等于橫向滾動(dòng)條的高度

vh & vw

在今天的網(wǎng)頁開發(fā)里，如果你想要用視口尺寸，不一定要使用JavaScript，CSS也推出了四個(gè)用于操作視口的單位，就像這樣：

值	說明
1vh	視口高度的1%
1vw	視口寬度的1%
1vmax	視口高度和寬度中的較大值的1%
1vmin	視口高度和寬度中的較小值的1%

<div id="A">A</div>
<div id="B">B</div><style>body{margin: 0;padding: 0;}#A{background: green;width: 90vw; /*占90%的寬度*/}#B{background: blue;height: 50vh; /*占50%的高度*/}
</style>

顏色單位

聊完了字體大小，長度單位，那么我們最常用的CSS單位就還有一個(gè)顏色

雖然顏色有非常多的枚舉值可以選，但是在實(shí)際開發(fā)中基本都是用不上的，畢竟得是審美多詭異的設(shè)計(jì)師才會(huì)喜歡這些大紅大紫

CSS最常用的一些顏色單位，其實(shí)打開PS的調(diào)色盤你就知道了：

看右下角這堆輸入框，其實(shí)這里有五種表示顏色的方式

• HSB

  這個(gè)在CSS里面用 hsl 來表示，hsl的四個(gè)參數(shù)分別代表這里的 H、S、B以及透明度

  這是給人理解的顏色表示方式，通過色度+飽和度的方式幫助你確認(rèn)自己挑的顏色

  一般來說如果看兩個(gè)相近顏色的RGB/十六進(jìn)制代碼，我們是看不出來這倆有多相似的，但是如果是hsl數(shù)值的話就會(huì)很明顯

• RGB & 十六進(jìn)制

  RGB模式應(yīng)該是大家最熟悉也是最常見的表示方式了，四個(gè)參數(shù)分別是，紅色、綠色、藍(lán)色以及透明度

  三種原色的最大值是255，所以RGB(255,255,255)是純白色

  而RGB和十六進(jìn)制是可以互相轉(zhuǎn)換的，255剛好等于16進(jìn)制的FF，所以顏色的十六進(jìn)制是固定位數(shù)的六位（八位的那種是加上透明度的）

• Lab

  這個(gè)很少用，但是CSS里也可以用，對(duì)應(yīng)的函數(shù)是： lab()

  盡量別用，因?yàn)檫@玩意兼容性目前不太行

• CMYK

  這個(gè)在網(wǎng)頁上不怎么用，但是如果你繪制一個(gè)需要用來打印的頁面時(shí)會(huì)用到這個(gè)東西

  在CSS里這樣寫：device-cmyk()

碎碎念

• css是屬性+屬性值的鍵值對(duì)表。屬性值是多樣的，可以是枚舉關(guān)鍵字、可以是不帶單位的數(shù)字，但是更多時(shí)候他是帶單位的值
• 長度單位分絕對(duì)單位和相對(duì)單位，絕對(duì)單位最常用的px，其他基本是印刷時(shí)用的單位
• 長度相對(duì)單位主要為響應(yīng)式服務(wù)，最常用的有em&rem、還有vh&vw
• 視口就是指瀏覽器窗口里網(wǎng)頁可見部分的邊框區(qū)域，雖然不包含標(biāo)題、地址、開發(fā)者窗口等等瀏覽器組件，但是包含滾動(dòng)條
• 顏色的各種單位基本上打開PS的調(diào)色盤就明白了

萬分感謝您看完這篇文章，如果您喜歡這篇文章，歡迎點(diǎn)贊、收藏。還可以通過專欄，查看更多與【CSS筆記】有關(guān)的內(nèi)容