一篇文章帶你了解CSS單位相關(guān)知識

家好，我是皮皮，今天給大家分享一些前端的知識。

一、了解 CSS 單位

測量長度的單位可以是絕對的，例如像素，點(diǎn)等，也可以是相對的，例如百分比（%）和 em 單位。

指定 CSS 單位對于非零值是必須的，因?yàn)闆]有默認(rèn)單位。丟失或忽略單位將被視為錯誤。但是，如果該值為 0，則可以省略該單位（畢竟，零像素與零英寸是一樣的）。

注意： 長度是指距離測量。長度包括數(shù)字值，后面加單位，比如 10px、2em、50% 等。數(shù)字和單位之間不能出現(xiàn)空白。

二、相對長度單位

相對長度單位指定相對于另一個長度屬性的長度。相對單位是描述：em當(dāng)前的字體大小。

ex ：當(dāng)前字體的 x 高度。

em 和 ex 單位取決于套用至元素的字體大小。

1. 使用 em 單位

em 的值等于使用它的元素的 font-size 屬性的計算值。它可用于垂直或水平測量。

例如，如果 font-size 元素設(shè)置為 16px，并且 line-height 設(shè)置為 2.5em，則 line-height像素計算值為：2.5?x?16px?=?40px。

P {
    font-size: 16px;
    line-height: 2.5em;
}

運(yùn)行效果

當(dāng)在 font-size 屬性本身的值中指定 em 時會發(fā)生異常，在這種情況下，它引用父元素的字體大小。

因此，當(dāng)我們用 em 指定字體大小時，1em 繼承自 font-size。因此， font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>平安保險</title>
        <link rel="stylesheet" type="text/css" href="css/fy.css" />
    </head>


    <body>
        <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
        <title>項(xiàng)目</title>
        <style>
            body {
                font-size: 62.5%;
                font-family: Arial, Helvetica, sans-serif;
            }


            p {
                font-size: 1.6em;
            }


            p:firt-letter {
                font-size: 3em;
                font-weight: bold;
            }
</style>


        <body style="text-align: center; background-color: aquamarine;">
            <div>ddad</div>
            <p> Hellow world</p>
        </body>


</html>

代碼解析：瀏覽器中字體的默認(rèn)大小為 16px。我們的第一步是通過將主體設(shè)置 font-size 為 62.5% 來減小整個文檔的大小，這會將字體大小重置為 10px（16px 的 62.5%）。

這是默認(rèn) font-size的四舍五入，方便 px 到 em的轉(zhuǎn)換。

2. 使用 ex 單位

ex 單位等于當(dāng)前字體的 x 高度。

所謂的 x 高度是因?yàn)樗ǔ５扔谛?x 的高度，如下所示。但是， ex 即使對于不包含 x 的字體，也會定義的。

P {
    font-size: 16ex;
    line-height: 2.5em;
}

三、絕對長度單位

絕對長度單位相對于彼此固定。它們高度依賴于輸出介質(zhì)，因此在輸出環(huán)境已知時主要有用。絕對單位由物理單位（的 in、cm、mm、pt、pc）和 px 單位。表中j進(jìn)行屬性的詳細(xì)介紹。

單位	描述
in	英寸 - 1 英寸等于 2.54 厘米。
cm	厘米。
mm	毫米。
pt	points - 在 CSS 中，一個點(diǎn)定義為 1?72 英寸（0.353mm）。
pc	picas - 1pc 等于 12pt。
px	像素單位 - 1px 等于 0.75pt。

絕對物理單位，例如 in、cm、mm 等應(yīng)被用于打印介質(zhì)和類似的高分辨率的設(shè)備。然而，對于桌面和低分辨率設(shè)備等屏幕顯示，建議使用像素或 em 單位。

例：

   h1 {
                margin: 0.5in;
            }
            /* inches  */


            h2 {
                line-height: 3cm;
            }
            /* centimeters */


            h3 {
                word-spacing: 4mm;
            }
            /* millimeters */


            h4 {
                font-size: 12pt;
            }
            /* points */


            h5 {
                font-size: 1pc;
            }
            /* picas */


            h6 {
                font-size: 12px;
            }
            /* picas */

提示： 使用相對單位（如 em 或百分比 %）的樣式表可以更輕松地從一個輸出環(huán)境擴(kuò)展到另一個輸出環(huán)境。

四、總結(jié)

本文主要介紹了css單位的運(yùn)用，通過兩個方面展開，相對長度單位，絕對長度單位，在項(xiàng)目中需要注意的點(diǎn)，需要注意的事項(xiàng)，都進(jìn)行了詳細(xì)的講解和提供了對應(yīng)的解決方案。代碼很簡單，希望可以幫助你學(xué)習(xí)。

如果在操作過程中有任何問題，記得下面留言，我們看到會第一時間解決問題。

么是彈性布局？

用戶的文字大小與彈性布局

用戶的瀏覽器默認(rèn)渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在用戶瀏覽器下默認(rèn)渲染是“16px”。當(dāng)然，如果用戶愿意他可以改變這種字體大小的設(shè)置，用戶可以通過UI控件來改變?yōu)g覽器默認(rèn)的字體大小。

彈性設(shè)計有一個關(guān)鍵地方Web頁面中所有元素都使用“em”單位值。“em”是一個相對的大小，我們可以這樣來設(shè)置1em，0.5em，1.5em等，而且“em”還可以指定到小數(shù)點(diǎn)后三位，比如“1.365em”。而其中“相對”的意思是：

1.相對的計算必然會一個參考物，那么這里相對所指的是相對于元素父元素的font-size。比如說：如果在一個<div>設(shè)置字體大小為“16px”，此時這個<div>的后代元素教程了是將繼承他的字體大小，除非重新在其后代元素中進(jìn)行過顯示的設(shè)置。此時，如果你將其子元素的字體大小設(shè)置為“0.75em”，那么其字體大小計算出來后就相當(dāng)于“0.75 X 16px=12px”；

2.如果用戶通過瀏覽器的UI控件改變了文字的大小，那么我們整個頁面也會進(jìn)行放大（或縮小），不至于用戶改變了瀏覽器的字體后會致使整個頁面崩潰（我想這種現(xiàn)像大家都有碰到過，不信你就試試你自己制作過的項(xiàng)目，你會覺得很恐怖）。

大家可以查看這個彈性布局樣例。此時你使用瀏覽器的UI控件改變了文字的大小或者直接“ctrl + ”和“ctrl - ”，你會發(fā)現(xiàn)這個彈性布局實(shí)例，在瀏覽器改變字體大小瀏覽會做出相應(yīng)的放大和縮小，并不會影響整個頁面的布局。注：這個實(shí)例的所有HTML和CSS在本教程中教程了都會使用到。

至于其他的彈性布局的實(shí)例，大家可以瀏覽Dan Cederholm的Simplebites，并改變文字的大小去瀏覽。

體驗(yàn)后，是不是覺得彈性布局的頁面很靈活呀，而且也像“px”一樣的精確。因此，只要我們掌握了“font-size”、“px”和“em”之間的基本關(guān)系，我們就可以民以食快速使用CSS創(chuàng)建精確的布局。

CSS的Elastigirl引進(jìn)EM

Elastigirl的“em”是極其強(qiáng)大和靈活的，他不管字體大小是什么，是12px，16或60，他都可以計算出其值。

em其實(shí)就是一種排版的測試單位，而且他的由來還有一段小故事，關(guān)于這段小故事我就不和大家說了，因?yàn)榇蠹叶疾皇莵砺犖抑v故事的，我想大還是喜歡知道他在CSS中的那些事。

在CSS中，“em”實(shí)際上是一個垂直測量。一個em等于任何字體中的字母所需要的垂直空間，而和它所占據(jù)的水平空間沒有任何的關(guān)系，因此：

如果字體大小是16px，那么1em=16px。

入門

在我們開始來了解CSS中的這個“em”之前，我們需要知道在瀏覽器下，他的默認(rèn)字體大小。正好我們前面也這樣做了，在所有現(xiàn)代瀏覽器中，其默認(rèn)的字體大小就是“16px”。因此在瀏覽器下默認(rèn)的設(shè)置將是：

1em=16px

因此，在一個CSS選擇器被寫入時，瀏覽器就有了一個“16px”大小的默認(rèn)字體。此時我們Web頁面中的<body>就繼承了這個“font-size:16px;”，除非你在CSS樣式中顯式的設(shè)置<body>的“font-size”值，來改變其繼承的值。這樣一來，“1em=16px”、“0.5em=8px”、“10em=160px”等等，那么我們也可以使用“em”來指定任何元素的大小。

設(shè)置Body的font-size

很多前輩在多年的實(shí)踐中得出一個經(jīng)驗(yàn)，他們建議我們在<body>中設(shè)置一個正文文本所需的字體大小，或者設(shè)置為“10px”，相當(dāng)于（“0.625em或62.5%”），這樣為了方便其子元素計算。這兩種都是可取的。但是我們都知道，<body>的默認(rèn)字體是“16px”，同時我們也很清楚了，我們改變了他的默認(rèn)值，要讓彈性布局不被打破，就需要重新進(jìn)行計算，重新進(jìn)行調(diào)整。所以完美的設(shè)置是： body {font-size:1em;}

可是在那個沒人愛的IE底下，“em”會有一個問題存在。調(diào)整字體大小的時候，同樣會打破我們的彈性布局，不過還好，有一個方法可以解決：

html {font-size: 100%;}

公式轉(zhuǎn)換——PXtoEM

如果你是第一創(chuàng)建彈性布局的，最好在身邊準(zhǔn)備一個計算器，因?yàn)槲覀円婚_始少不了很多的計算，有了他放心。

像素對于我們來說太密切了，因此我們也將從這開始。首先需要計算出1px和em之間的比例，然后是知道我們需要的px值。通過前面的介紹，大家都知道1em總是等于父元素的字體大小，因此我們完全可以通過下面的工式來計算：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值

大家可以參考一下面這張轉(zhuǎn)換表(body字體為16px時的值)

接下來我們一起看一個很簡單的實(shí)例“使用CSS的EM制作一個960px寬度的彈性布局”

HTML Markup

將960px轉(zhuǎn)換為em

1 ÷ 16px × 960px=60em

這個計算值的前提條件是<body>的“font-size:16px”。

CSS Code

html { font-size: 100%; } body { font-size: 1em; } #container { width: 60em; }

通過上面的實(shí)例，我想大家更能形像化的理解了，因?yàn)橛欣稍儯鋵?shí)我們可以把上面的計算公式轉(zhuǎn)換一下，將更方便你的計算：

需要轉(zhuǎn)換的像素值 ÷ 父元素的font-size=em值

那么我們上面的實(shí)例“960px”就可以這樣來轉(zhuǎn)換成“em”值

960px ÷ 16px=60em

上面我們一起見證了“px”轉(zhuǎn)換成“em”的計算方式，接下來我們一起來動看制作上面展示過的彈性布局樣例。下面我們主要一起來一步一步的實(shí)現(xiàn)他。

構(gòu)建一個彈性的容器

要創(chuàng)建彈性布局樣例那樣的居中效果，我們首先需要創(chuàng)建一個HTML結(jié)構(gòu)，我在此給創(chuàng)建一個<div>并且取名叫“wrap”

<body> <div id="wrap"> content here</div> </body>

我們希望這個容器是一個“740px”寬，適合一個“800px × 600px”顯屏的實(shí)例。那么“740px”會等于多少“em”呢？這就是我們需要關(guān)心的問題，大家一起來看吧：

1、將“740px”轉(zhuǎn)換成“em”設(shè)置到我們的容器“div#wrap”：我們都知道“div#wrap”的父元素<body>設(shè)置了字體為“16px”，那么此時在沒有進(jìn)行另外顯示的設(shè)置時，他的子元素<div id="wrap">將繼承“font-size”值，這樣我們就可以輕意得到：“1px和1em之間的關(guān)系”

1em=16px 也就是 1px=1 ÷ 16=0.0625em

這樣一來，我們的“740px”就很容易的能轉(zhuǎn)換成“em” 0.0625em × 740=46.25em

當(dāng)然大家也可以按照我們前面所列出的計算公式來進(jìn)行轉(zhuǎn)換，這樣你心中更具有一個概念性，也不容易弄錯：

1 ÷ 16 × 740=46.25em (1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值)

這樣一來，您可以使用上面的公式計算出您需要的任何寬度或高度的“em”值，你只需要知道“1px等于多少em”，另外就是你要轉(zhuǎn)換的“px”值是多少，具備這幾個參數(shù)你就能得到你想要的“em”值了。

2、創(chuàng)建CSS樣式：現(xiàn)在我們可以給“div#wrap”寫樣式了，彈性布局樣例很明顯的告訴我們，給“div#wrap”設(shè)置了一個寬度為“740px”居中，帶有上下“margin”為“24px”，而且?guī)в小?px”的邊框效果，那么我們首先根據(jù)上面的公式計算出相應(yīng)的“em值”，然后在寫到CSS樣式中：

html {font-size: 100%;} body {font-size: 1em;} #wrap { width: 46.25em;/*740px ÷ 16=46.25em */ margin: 1.5em auto;/*24px ÷ 16=1.5em*/ border: 0.0625em solid #ccc;/*1px ÷ 16=0.0625em*/ }

現(xiàn)在我們就輕松的創(chuàng)建了一個包含內(nèi)容的彈性容器：彈性布局樣例。

文本樣式與em

首先我們在前面那個創(chuàng)建的<div id="wrap"></div>中插入一個<h1>和一個<p>:

在彈性布局樣例實(shí)例中，我們標(biāo)題使用了“18px”，而段落設(shè)置的是“12px”字體，同時其行高是“18px”。18px將是我們實(shí)現(xiàn)彈性布局的一個重要值，可以使用他們都按正比變化。（有關(guān)于標(biāo)題和段落的排版介紹，大家感興趣可以點(diǎn)擊Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相關(guān)介紹）。

根據(jù)CSS繼承一說，我們在“div#wrap”的內(nèi)容容器中沒有顯式的設(shè)置字體大小，這樣整個“div#wrap”將繼承了其父元素“body”的字體——“16px”。

1、給段落設(shè)置樣式：——“12px”的字體，“18px”的行高以及margin值

從CSS繼承中，我們可以得知我們所有段落繼承了其父元素“div#wrap”的“font-size:16px”。同時我們通過前面的介紹得知1px=1 ÷ 16=0.0625em，這樣一來我們就很輕松的知道“12px”等于多少個“em”

0.0625em × 12=0.750em

這樣我們就可以給段落p設(shè)置樣式：

p {font-size: 0.75em;/*0.0625em × 12=0.750em */}

要計算出段落所需的行高和“margin”為“18px”，來滿足Richard Rutter說的basic leading，那我們就需要像下面的方法和來計算：

18 ÷ 12=1.5em

使用所需的行高值“18px”直接除以“字體大小12px”，這樣就得到了段落“p”的“l(fā)ine-height”值。在本例中行高就等于字體的“1.5”倍，接著我們把“l(fā)ine-height”和“margin”樣式加到段落“p”中

p{ font-size: 0.75em;/*0.625em × 12=0.750em */ line-height: 1.5em;/*18px(line-height) ÷ 12(font-size)=1.5em */ margin: 1.5em;/*18px(margin) ÷ 12(font-size)=1.5em */ }

2、給標(biāo)題設(shè)置一個18px的字號

標(biāo)題“h1”和段落“p”一樣的原理，他也是繼承他父元素“div#wrap”的“16px”的“font-size”，所以我們也是按同樣的方法可以計處出他的“em”

0.0625em × 18=1.125em

我們可以把得出的值寫到CSS樣式表中

h1 { font-size: 1.125em;/*0.625em × 18=1.125em*/ }

同樣為了保留Richard Rutter所說的vertical rhythm，我們同樣將標(biāo)題“h1”的“l(fā)ine-height”和“margin”都設(shè)置為“18px”，使用方法前面介紹的方法。很容易得到他們的“em”值為“1em”:

h1 { font-size: 1.125em; /*0.625em × 18=1.125em*/ line-height: 1em; /*18px(line-height) ÷ 18px(font-size)=1em */ margin: 1em; /*18px(margin) ÷ 18px(font-size)=1em */ }

設(shè)置圖片大小——使用em

要做出彈性布局樣例這樣的果，我們也需要在html中插入一張圖片：

<body> <div id="wrap"> <h1>....</h1> <p><img src="90.png" alt="" /> Lorem...</p> </div> </body>

我們這張圖片具有“90px”的寬和高，同時具有一個右邊距和底邊距為“18px”設(shè)置，而且還進(jìn)行左浮動。下面我們就一起來看其如何實(shí)現(xiàn)圖片這幾個樣式效果：

從HTML結(jié)構(gòu)中，我們很清楚的知道，圖片是段落“p”的子元素，通過前面的介紹，你們知道這個段落“p”的“font-size”值被得定義為“12px”，因此我們計算圖片的屬性值時，不能在按“1px=0.0625em”或者“1em=16px”來計算，我們需要使用最老的公式計算：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值

這樣一來，按上面所示的公式，我們就可以計算出圖片的大小：

1 ÷ 12 × 90=7.5em

現(xiàn)在你就可以將計算出來的值寫到樣式中去：

p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度)=7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度)=7.5em */ }

我們在段落中知道了“18px”剛好是“1em”，現(xiàn)在我們也把他使用到圖片的樣式中：

p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的寬度)=7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(圖片的高度)=7.5em */ margin: 0 1.5em 1.5em 0; float: left; }

這樣我們就制作出一個和彈性布局樣例一樣的效果。希望通過這樣的一個實(shí)例能幫助大家了解如何使用“em”來創(chuàng)建一個彈性布局的方法。當(dāng)然大家可能還在擔(dān)心使用“em”來制作一個彈性布局，不能像“px”一樣的的精確，如果你真正理解了這篇教程后，我想你不會在有這樣的想法。

彈性布局的公式總結(jié)

最后我想大家肯定和我會有同一種想法，就是相關(guān)參數(shù)是的“px”值如何成功而且正確的轉(zhuǎn)換成“em”值，經(jīng)過上面的學(xué)習(xí)，我最后將公式總結(jié)一下：

元素自身沒有設(shè)置字號大小時，元素的width、height、line-height、margin、padding、border等值轉(zhuǎn)換都按下面公式轉(zhuǎn)換：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值

我們來看一個實(shí)例：

我們在body默認(rèn)字體大小為“16px”,此時需要“div#wrapper”的相關(guān)參數(shù)值為：

#wrapper { width: 200px; height: 100px; border: 5px solid red; margin: 15px; padding: 10px; line-height: 18px; }

那么我們按照上面的公式，將所在參數(shù)進(jìn)行轉(zhuǎn)換：

#wrapper { width: 12.5em;/*1 ÷ 16 × 200=12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100=6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5=0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15=0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10=0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18=1.125em值*/ }

我們一起來看計算出來的值：

接下來我需要大家在來看一個效果，這一點(diǎn)很關(guān)鍵喲，仔細(xì)看好，在同樣的參數(shù)基礎(chǔ)上稍加一條元素本身設(shè)置字體大小為：14px；，大家可以會說很簡單的呀，按前面的公式計算出來加上就是了，那么我現(xiàn)在就按大家說的計算加上：

#wrapper { font-size: 0.875em;/*1 ÷ 16 × 14=0.875em值*/ width: 12.5em;/*1 ÷ 16 × 200=12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100=6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5=0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15=0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10=0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18=1.125em值*/ }

此進(jìn)我們在firebug下看計算出來的layout值

為了更好的說明問題，我把元素自身沒有設(shè)置字體大小和元素自身設(shè)置了字體大小，兩者在firebug計算出來值：

我截這個圖的主要意圖是，說明一個問題就是元素自身要是設(shè)置了字體大小后，其計算公式就不在是前面所說的，我們需要做一下修改：

1、字體計算公式依舊

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值

2、其它屬性的計算公式需要換成

1 ÷ 元素的font-size × 需要轉(zhuǎn)換的像素值=em值

那么我們現(xiàn)在來計算一回：

#wrapper { font-size: 0.875em;/*1 ÷ 16 × 14=0.875em值*/ width: 14.2857em;/*1 ÷ 14 × 200=14.2857em值*/ height: 7.1429em;/*1 ÷ 14 × 100=7.1429em值*/ border: 0.357em solid red;/*1 ÷ 14 × 5=0.357em值*/ margin: 1.071em;/*1 ÷ 14 × 15=1.071em值*/ padding: 0.714em;/*1 ÷ 14 × 10=0.714em值*/ line-height: 1.2857em;/*1 ÷ 14 × 18=1.2857em值*/ }

我們在來看一次計算出來的值：

總結(jié)

長篇介紹了一大堆，唯一想告訴大家的是以下幾點(diǎn)

1、瀏覽器的默認(rèn)字體大小是16px

2、如果元素自身沒有設(shè)置字體大小，那么元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等值，我們都可以按下面的公式來計算

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值

3、這一種千萬要慢慢理解，不然很容易與第二點(diǎn)混了。如果元素設(shè)置了字體大小，那么字體大小的轉(zhuǎn)換依舊按第二條公式計算，也就是下面的：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值=em值

那么元素設(shè)置了字體大小，此元素的其他屬性，如“border、width、height、padding、margin、line-height”計算就需要按照下面的公式來計算：

1 ÷ 元素自身的font-size × 需要轉(zhuǎn)換的像素值=em值

這樣說，不知道大家理解了整明白了沒有，如果沒有整明白，可以回過頭來看上面的一個實(shí)例。

多入門學(xué)前端的同學(xué)，或是準(zhǔn)備面試的同學(xué)都會去死記硬背一些前端知識點(diǎn)，筆者也是這么經(jīng)歷過來的，但卻不推薦這種囫圇吞棗、不求甚解的學(xué)習(xí)方式，因?yàn)檫@樣會走很多彎路，屬于“應(yīng)試”學(xué)習(xí)，我們更應(yīng)該的是從基礎(chǔ)到復(fù)雜，從表象到原理的角度卻思考學(xué)習(xí)，才能熟練掌握技能。

整理了一些在CSS（層疊樣式表）中的知識點(diǎn)，或許你曾看過一些什么“萬字總結(jié)”、“面試必看”，但還是希望更多同學(xué)能夠沉下心來學(xué)習(xí)，不僅僅滿足于停留在“API工程師”的層面，多從CSS約定的規(guī)則去解釋現(xiàn)象。

一、width（寬）& height（高）

瀏覽器中，明確了width和height就可以繪制出一塊矩形區(qū)域，也決定（量化）了當(dāng)前HTML標(biāo)簽渲染后在屏幕上占據(jù)的有效矩形面積。

1.1 width與height的值

值說明100px像素（絕對）單位，矩形寬度為100px50%百分比（相對）單位，矩形寬度為包含塊定義width的50%50vw（相對）單位，矩形寬度為視口寬度的50%，CSS3規(guī)范50vh（相對）單位，矩形寬度為視口高度的50%，CSS3規(guī)范auto默認(rèn)值，為內(nèi)容（與子元素）撐開的寬度，塊級元素寬度默認(rèn)為100%inherit繼承父元素對應(yīng)值initial初始值，在MDN文檔中可查，不同的CSS屬性的初始值不同unset繼承父級相應(yīng)屬性值，父級沒有對應(yīng)屬性則取默認(rèn)初始值

height屬性規(guī)則與width相同。另外max-height、min-height優(yōu)先級大于height，同理max-width和min-width優(yōu)先級大于width。

1.2 height:100%無效

我們有時會在CSS里寫height: 100%，發(fā)現(xiàn)并無效果，如下：

<div class="block"></div>

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-color: green;
/*   height: 100%; */
  border: 5px solid greenyellow;
}
.block {
  width: 100%;
  height: 100%;
  background-color: red;
}

block類 div的高度并未按照我們預(yù)想那樣撐滿全屏高度

高度100%并未鋪滿屏幕

代碼&效果：https://codepen.io/DYBOY/embed/RwoJKRP

block類的父級（包含塊）是body，body在未設(shè)置值的時，height值為auto，body的實(shí)際計算高度為內(nèi)容撐開的高度，即為0（可以將上述代碼的border樣式取消注釋，可看到body的高度）

那么子元素block類的高度即等同于0

body {
    background-color: azure;
    height: auto;
}
.block {
    width: 100%;
    height: 0 * 100%; // 0
    background-color: red;
}

所以此時block類所在的div盒子的高度無效，height為0，即在瀏覽器上無渲染高度瀏覽器的渲染規(guī)則可理解記憶為：深度優(yōu)先遍歷計算

子元素的相對單位的計算值都是基于父/祖先元素對應(yīng)的屬性值，auto是基于內(nèi)容區(qū)域撐開計算所得。

瀏覽器渲染HTML文檔流，背景色默認(rèn)為白色，如果文檔中的html、body標(biāo)簽設(shè)置了背景色，這兩個標(biāo)簽的背景色實(shí)際設(shè)置的是瀏覽器視口的背景色。

二、padding（內(nèi)邊距）& border（邊框）& magin（外邊距）

盒模型可以看作四個“同心矩形”組合而成，如下圖

對于這三個屬性的表現(xiàn)其實(shí)并無特別可說明，見上圖可知意。

元素分為行級元素和塊級元素，行級元素的margin和padding的上下值無效。

2.1 百分比單位計算

自己之前一直有個誤區(qū)，認(rèn)為padding、margin的百分比單位的計算基數(shù)是當(dāng)前元素矩形區(qū)域?qū)捀邅硭悖歉鶕?jù)包含塊的規(guī)則，他們的計算基數(shù)應(yīng)該是包含塊的width值。

之前團(tuán)隊(duì)里大佬洪巖問：“如何實(shí)現(xiàn)一個高度是自適應(yīng)寬度3倍的圖片？”

實(shí)現(xiàn)方法1: 利用Chrome瀏覽器最新支持的aspect-ratio屬性，其問題就是C端瀏覽器兼容性不好

.box {
    aspect-ratio: 1/3; // width/height 寬高比
}

aspect-ratio效果

實(shí)現(xiàn)方法2: 巧用包含塊規(guī)則（padding和width屬性百分比值的計算基數(shù)是包含塊的寬度）+背景圖實(shí)現(xiàn)

利用包含塊規(guī)則實(shí)現(xiàn)

代碼和演示：https://codepen.io/DYBOY/pen/JjbZgeE

2.2 border-radius百分比和像素

border-radius屬性用于描述邊框圓角半徑，根據(jù)資料如果是百分比單位，則根據(jù)所在**盒子模型的矩形寬和高（包含border和padding）**作為計算基數(shù)，border-radius的值描述的是邊框角度所在橢圓的半長軸和半短長軸長度。

border-*-radius屬性的兩個長度或百分比值定義了四分之一橢圓的半徑，該半徑定義了外邊界邊角的形狀（參見下圖）。第一個值為水平半徑，第二個為垂直半徑。如果省略第二個值，則從第一個復(fù)制。如果任一長度為零，則角為正方形，而不是圓角。

水平半徑的百分比是指邊框的寬度，而垂直半徑的百分比是指邊框的高度。

來看下面這個示例：

<div class="box">1</div>
<div class="box style1">2</div>
<div class="box style2">3</div>
<div class="box style3">4</div>

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fff;
}
.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 10px auto;
    background-color: #00abef;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #fff;
}
.style1 {
    padding: 20px;
}
.style2 {
    padding: 20px;
    border-radius: 50%;
}
.style3 {
    padding: 20px;
    border-width: 10px;
    box-sizing: border-box;
}

效果

代碼&演示：https://codepen.io/DYBOY/pen/BaQPaaj

發(fā)現(xiàn)第二個形狀是一個橢圓，其原因是百分比的計算是把所在元素矩形區(qū)域的寬和高作為計算基數(shù)，而所在矩形的框高的計算值需要加上padding和border的寬度，所以變成了一個橢圓。那么，是不是把盒模型設(shè)置為IE盒模型就可以避免這個問題了？答案是的，如上代碼的第四個圓形。

參考詳細(xì)資料：https://www.w3.org/TR/2010/WD-css3-background-20100612/#the-border-radius

利用邊框的橢圓，可以制造平滑的不規(guī)則形狀，例如模仿一個水滴：

運(yùn)動的水珠

**知識點(diǎn)：**如果沒有設(shè)置border-color，默認(rèn)邊框顏色為所在元素的文本顏色。

2.3 BFC與margin折疊

BFC是盒模型中在屏幕上渲染展示的矩形區(qū)域，決定了浮動、盒模型渲染交互的區(qū)域。

margin區(qū)域折疊是一個BFC（塊級格式化上下文）的問題，兩個div屬于同一個BFC。父子元素margin-top塌陷，兄弟元素margin重合取較大值。

若想要避免，則需要讓兩個相鄰設(shè)置了margin的元素都變成一個BFC。

創(chuàng)建BFC的常見CSS屬性值？

浮動元素，float：left/right/auto
定位，position：absolute/fixed
展示，display：inline-block/table相關(guān)/flow-root/flex/grid
flex/grid 的直接子元素為BFC
table 相關(guān)的比如 table、table-cell、table-caption等
flow-root最好，無副作用
溢出，顯示指明overflow：hidden/auto
overflow的css計算值不為visiable，也就是指明溢出盒模型交互區(qū)域的處理方式
html根元素是一個BFC

關(guān)于BFC更詳細(xì)的解讀可以參閱：

《可能是最好的BFC解析了...》- https://juejin.cn/post/6960866014384881671

2.3.1 實(shí)例&解決方案

2.3.1.1 父子高度塌

父級margin，子級的margin-top無效

高度塌陷

代碼&演示：https://codepen.io/DYBOY/pen/poNxjOP

解決方案：

原因是父子組件的margin-top取最大值，上面例子中父子組件的包含塊都是body，屬于同一個BFC（html標(biāo)簽）內(nèi)的子元素，因此需要將父/子元素變成BFC（根據(jù)如上的創(chuàng)建BFC的CSS值設(shè)置），那么子元素的margin就會依賴父元素的左上角作為基準(zhǔn)點(diǎn)margin偏移。

2.3.1.2 兄弟元素margin取較大值

<style>
.box {
    margin: 20px auto;
    background-color: red;
    width: 200px;
    height: 200px;
}
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

上下相鄰元素的外邊距為20px重合了

解決方案：

想要每兩個盒子的上下邊距為20px*2，則就需要如下處理：

<style>
.box-parent {
    overflow: hidden;
    /* display: flow-root; */
}
.box {
    margin: 20px auto;
    background-color: red;
    width: 200px;
    height: 200px;
}
</style>

<div class="box-parent">
    <div class="box"></div>
</div>
<div class="box-parent">
    <div class="box"></div>
</div>
<div class="box-parent">
    <div class="box"></div>
</div>

推薦解決方案：

由于改變了DOM結(jié)構(gòu)，所以不是最好的解決方法，更好的方法就是利用塌陷規(guī)則，增加margin-bottom/margin-top的值，直接計算得到兩塊元素之間的margin，并設(shè)置對應(yīng)值。

三、Containing Block（包含塊）

包含塊內(nèi)容可參閱文章《字節(jié)前端都知道的CSS包含塊規(guī)則》

四、box-sizing（盒模型）

盒子模型包含四部分：外邊距（margin area）、邊框（border area）、內(nèi)邊距（padding area）、內(nèi)容區(qū)（content area），其分布組合如下圖所示。

盒子模型

盒模型有兩種，IE盒模型（border-box）和標(biāo)準(zhǔn)盒模型（content-box），其常用語法如下

// 默認(rèn)為標(biāo)準(zhǔn)盒模型
box-sizing：border-box ｜ content-box

不同的盒模型影響HTML標(biāo)簽在瀏覽器上實(shí)際渲染的屏幕像素面積，該屬性規(guī)定了border和padding屬性值是否占用width和height規(guī)定的內(nèi)容區(qū)。

例如寬度width屬性的值計算規(guī)則如下：

content-box：width=content width
border-box：width=content width + padding width + margin width

一言以蔽之，content-box的寬高是規(guī)定內(nèi)容區(qū)寬高，border-box的寬高規(guī)定了content+border+padding三者和的寬高

CSS盒模型

五、position（定位）

關(guān)于定位，必要明確的就是定位的基準(zhǔn)點(diǎn)是哪兒？

值說明static默認(rèn)值，文檔流正常位置，top、left、right、bottom、z-index無效relative相對定位，相對文檔流原正常位置左上角偏移，不影響其他元素absolute絕對定位，脫離正常文檔流，相對position!=static的父元素（包含塊）左上角偏移fixed固定定位，脫離正常文檔流，相對視口左上角偏移sticky粘性定位，相對文檔流的包含塊、滾動祖先元素左上角偏移，不影響其他元素

六、font-size（字號）& line-height（行高）

line-height帶有單位時，計算行高的結(jié)果為line-height高度，line-height規(guī)定的是行高最小的的高度

line-height是相對單位時，line-height具有繼承性，其子元素如果沒有設(shè)置line-height，那么子元素的行高為父元素計算所得的行高值。

line-height值為純數(shù)字時，當(dāng)前行高會根據(jù)當(dāng)前文本的 font-size*line-height 計算所得。

七、CSS選擇器

7.1 通用選擇器

.a.b：（無空格）當(dāng)a和b在同一標(biāo)簽類名中同時出現(xiàn)才選擇
.a .b：（有空格）選擇a的所有后代b
.a>.b：（>）選擇a的子代b
.a, .b：（,）a與b樣式相同
.a+.b：（+）選擇a緊鄰的兄弟b
.a~.b：（~）有共同父元素，選擇a后的所有b，ab不必緊鄰

7.2 屬性選擇器：

[attr]：表示帶有以attr命名的屬性的元素。
[attr=value]：表示帶有以attr命名的屬性，且屬性值為value的元素。
[attr~=value]：表示帶有以attr命名的屬性的元素，并且該屬性是一個以空格作為分隔符的值列表，其中至少有一個值為value。
[attr|=value]：表示帶有以attr命名的屬性的元素，屬性值為“value”或是以“value-”為前綴（"-"為連字符，Unicode 編碼為 U+002D）開頭。典型的應(yīng)用場景是用來匹配語言簡寫代碼（如 zh-CN，zh-TW 可以用 zh 作為 value）。
[attr^=value]：表示帶有以attr命名的屬性，且屬性值是以value開頭的元素。
[attr$=value]：表示帶有以attr命名的屬性，且屬性值是以value結(jié)尾的元素。
[attr*=value]：表示帶有以attr命名的屬性，且屬性值至少包含一個 value 值的元素。

7.3 偽類選擇器

:root ：文檔根元素

八、文本處理

font-stretch: normal;
font-kerning: normal;
text-rendering: optimizeLegibility;

文本是最基礎(chǔ)最重要的功能之一，深入了解文本的渲染布局非常有必要。

關(guān)于文本處理相關(guān)的CSS，知識點(diǎn)較多且深，因此將在后續(xù)文章將詳細(xì)解讀，因?yàn)槲淖痔幚韺儆谝粋€需要深入理解的領(lǐng)域，也是一個基礎(chǔ)領(lǐng)域，在大部分的場景我們是不需要關(guān)心，但是如果涉及到精細(xì)化展示、兼容性的問題，就不得不涉及到文本渲染原理相關(guān)內(nèi)容。

九、flex布局

.box {
    display: flex;  /* 還可以設(shè)置行內(nèi)元素的 inline-flex */
    flex-direction: row; /* 主軸水平！：row：列（左至右）；row-reverse：列（右至左）   主軸豎直！cloumn：行（上至下）；column-reverse：行（下至上） */
    flex-wrap: nowrap; /* 一行放不下的時候：nowrap不換行，wrap換行，wrap-reverse換行第一行在下方  */
    /* flex-flow: row nowrap;  是上面兩者的簡寫形式 */
    justify-content: flex-start;  /* 定義項(xiàng)目在主軸上的對齊方式  flex-start左側(cè)，flex-end右側(cè)，center居中，space-between兩端對齊項(xiàng)目間隔相等，space-around項(xiàng)目左右兩側(cè)間距相同 */
    align-items: flex-start; /* 定義項(xiàng)目在縱軸上的對齊方式  flex-start上，flex-end下，center居中，baseline項(xiàng)目中第一行文字對齊，stretch默認(rèn)值高度未設(shè)置時候?qū)螡M容器高度 */
}
.item {
    order: 0;   /* 定義項(xiàng)目的排列順序，數(shù)值越小越靠前，默認(rèn)0 */
    flex-grow: 0;   /* 定義剩于空間的放大比例，默認(rèn)0不放大，如果多個item均為1，則將等分剩于的空間，不同值按照比例分配剩于空間 */
    flex-shrink: 1; /* 定義項(xiàng)目縮小比例，默認(rèn)為1，空間不足，均等比例縮小，為0則不縮小 */
    flex-basis: auto; /* 定義項(xiàng)目在分配剩于主軸空間之前的主軸占據(jù)的長度，瀏覽器會根據(jù)這個屬性去計算是否有剩于的空間 */
    /* flex: auto; 是flex-grow、flex-shrink和flex-basis的簡寫默認(rèn)值：0 1 auto */
    align-self: flex-start; /* 設(shè)置單個項(xiàng)目與其他項(xiàng)目不一樣的對齊方式，可覆蓋父容器設(shè)置的align-items，默認(rèn)auto繼承父元素的align-items值  auto | flex-start | flex-end | center | baseline | stretch */
}

上述是筆者對flex使用經(jīng)驗(yàn)的一些精簡總結(jié)，另外推薦大家閱讀《Flexbox布局中不為人知的細(xì)節(jié) - Alibaba F2E》，從原理層解讀，研讀完非常受用。

十、自定義CSS屬性

example：

html {
    --theme-color: red;
    --theme-font-size: 16px;
}

.example {
    color: var(--theme-color);
    font-size: var(--theme-font-size);
}

因?yàn)槭切碌膶傩砸?guī)則，在低版本設(shè)備上可能遇上不兼容情況，因此可以使用查詢特性的@supports()

@supports(color: var(--theme-color)) {
    // 支持上面的的處理方式則下面的css將生效
    .class-box {
        color: var(--theme-color);
    }
}

// 對于selector的支持不好
@supports not (color: var(--theme-color)) {
    // 不支持上面的的處理方式則下面的css將生效
    .class-box {
        color: red;
    }
}

兼容性：https://caniuse.com/?search=%40supports

@support文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports

總結(jié)

上述講到了十個大的CSS知識點(diǎn)，也是工作開發(fā)過程中經(jīng)常會遇到的細(xì)節(jié)問題，把這些知識點(diǎn)/CSS規(guī)則熟記于心，有利于高效率編寫前端樣式！

在線咨詢

上一篇：四平人大常委會辦公室、四平市委政法委、四平市圖書館招
下一篇：只知道ChatGPT？金沙江創(chuàng)投2023科技投資展望

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

一篇文章帶你了解CSS單位相關(guān)知識

一、了解 CSS 單位

二、相對長度單位

1. 使用 em 單位

2. 使用 ex 單位

三、絕對長度單位

四、總結(jié)

一、width（寬）& height（高）

1.1 width與height的值

1.2 height:100%無效

二、padding（內(nèi)邊距）& border（邊框）& magin（外邊距）

2.1 百分比單位計算

2.2 border-radius百分比和像素

2.3 BFC與margin折疊

2.3.1 實(shí)例&解決方案

2.3.1.1 父子高度塌

2.3.1.2 兄弟元素margin取較大值

三、Containing Block（包含塊）

四、box-sizing（盒模型）

五、position（定位）

六、font-size（字號）& line-height（行高）

七、CSS選擇器

7.1 通用選擇器

7.2 屬性選擇器：

7.3 偽類選擇器

八、文本處理

十、自定義CSS屬性

總結(jié)

您的項(xiàng)目需求