一篇文章帶你了解CSS單位相關知識

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

一、了解 CSS 單位

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

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

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

二、相對長度單位

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

ex ：當前字體的 x 高度。

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

1. 使用 em 單位

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

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

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

運行效果

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

因此，當我們用 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>項目</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>

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

這是默認 font-size的四舍五入，方便 px 到 em的轉換。

2. 使用 ex 單位

ex 單位等于當前字體的 x 高度。

所謂的 x 高度是因為它通常等于小寫 x 的高度，如下所示。但是， ex 即使對于不包含 x 的字體，也會定義的。

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

三、絕對長度單位

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

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

絕對物理單位，例如 in、cm、mm 等應被用于打印介質和類似的高分辨率的設備。然而，對于桌面和低分辨率設備等屏幕顯示，建議使用像素或 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 或百分比 %）的樣式表可以更輕松地從一個輸出環境擴展到另一個輸出環境。

四、總結

本文主要介紹了css單位的運用，通過兩個方面展開，相對長度單位，絕對長度單位，在項目中需要注意的點，需要注意的事項，都進行了詳細的講解和提供了對應的解決方案。代碼很簡單，希望可以幫助你學習。

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

么是彈性布局？

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

用戶的瀏覽器默認渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在用戶瀏覽器下默認渲染是“16px”。當然，如果用戶愿意他可以改變這種字體大小的設置，用戶可以通過UI控件來改變瀏覽器默認的字體大小。

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

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

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

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

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

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

CSS的Elastigirl引進EM

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

em其實就是一種排版的測試單位，而且他的由來還有一段小故事，關于這段小故事我就不和大家說了，因為大家都不是來聽我講故事的，我想大還是喜歡知道他在CSS中的那些事。

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

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

入門

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

1em=16px

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

設置Body的font-size

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

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

html {font-size: 100%;}

公式轉換——PXtoEM

如果你是第一創建彈性布局的，最好在身邊準備一個計算器，因為我們一開始少不了很多的計算，有了他放心。

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

1 ÷ 父元素的font-size × 需要轉換的像素值=em值

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

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

HTML Markup

將960px轉換為em

1 ÷ 16px × 960px=60em

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

CSS Code

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

通過上面的實例，我想大家更能形像化的理解了，因為有例可詢，其實我們可以把上面的計算公式轉換一下，將更方便你的計算：

需要轉換的像素值 ÷ 父元素的font-size=em值

那么我們上面的實例“960px”就可以這樣來轉換成“em”值

960px ÷ 16px=60em

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

構建一個彈性的容器

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

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

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

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

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

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

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

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

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

2、創建CSS樣式：現在我們可以給“div#wrap”寫樣式了，彈性布局樣例很明顯的告訴我們，給“div#wrap”設置了一個寬度為“740px”居中，帶有上下“margin”為“24px”，而且帶有“1px”的邊框效果，那么我們首先根據上面的公式計算出相應的“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*/ }

現在我們就輕松的創建了一個包含內容的彈性容器：彈性布局樣例。

文本樣式與em

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

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

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

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

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

0.0625em × 12=0.750em

這樣我們就可以給段落p設置樣式：

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

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

18 ÷ 12=1.5em

使用所需的行高值“18px”直接除以“字體大小12px”，這樣就得到了段落“p”的“line-height”值。在本例中行高就等于字體的“1.5”倍，接著我們把“line-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、給標題設置一個18px的字號

標題“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，我們同樣將標題“h1”的“line-height”和“margin”都設置為“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 */ }

設置圖片大小——使用em

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

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

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

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

1 ÷ 父元素的font-size × 需要轉換的像素值=em值

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

1 ÷ 12 × 90=7.5em

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

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

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

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; }

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

彈性布局的公式總結

最后我想大家肯定和我會有同一種想法，就是相關參數是的“px”值如何成功而且正確的轉換成“em”值，經過上面的學習，我最后將公式總結一下：

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

1 ÷ 父元素的font-size × 需要轉換的像素值=em值

我們來看一個實例：

我們在body默認字體大小為“16px”,此時需要“div#wrapper”的相關參數值為：

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

那么我們按照上面的公式，將所在參數進行轉換：

#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值*/ }

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

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

#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值*/ }

此進我們在firebug下看計算出來的layout值

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

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

1、字體計算公式依舊

1 ÷ 父元素的font-size × 需要轉換的像素值=em值

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

1 ÷ 元素的font-size × 需要轉換的像素值=em值

那么我們現在來計算一回：

#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值*/ }

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

總結

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

1、瀏覽器的默認字體大小是16px

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

1 ÷ 父元素的font-size × 需要轉換的像素值=em值

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

1 ÷ 父元素的font-size × 需要轉換的像素值=em值

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

1 ÷ 元素自身的font-size × 需要轉換的像素值=em值

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

多入門學前端的同學，或是準備面試的同學都會去死記硬背一些前端知識點，筆者也是這么經歷過來的，但卻不推薦這種囫圇吞棗、不求甚解的學習方式，因為這樣會走很多彎路，屬于“應試”學習，我們更應該的是從基礎到復雜，從表象到原理的角度卻思考學習，才能熟練掌握技能。

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

一、width（寬）& height（高）

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

1.1 width與height的值

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

height屬性規則與width相同。另外max-height、min-height優先級大于height，同理max-width和min-width優先級大于width。

1.2 height:100%無效

我們有時會在CSS里寫height: 100%，發現并無效果，如下：

<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的高度并未按照我們預想那樣撐滿全屏高度

高度100%并未鋪滿屏幕

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

block類的父級（包含塊）是body，body在未設置值的時，height值為auto，body的實際計算高度為內容撐開的高度，即為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，即在瀏覽器上無渲染高度瀏覽器的渲染規則可理解記憶為：深度優先遍歷計算

子元素的相對單位的計算值都是基于父/祖先元素對應的屬性值，auto是基于內容區域撐開計算所得。

瀏覽器渲染HTML文檔流，背景色默認為白色，如果文檔中的html、body標簽設置了背景色，這兩個標簽的背景色實際設置的是瀏覽器視口的背景色。

二、padding（內邊距）& border（邊框）& magin（外邊距）

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

對于這三個屬性的表現其實并無特別可說明，見上圖可知意。

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

2.1 百分比單位計算

自己之前一直有個誤區，認為padding、margin的百分比單位的計算基數是當前元素矩形區域寬高來算，但是根據包含塊的規則，他們的計算基數應該是包含塊的width值。

之前團隊里大佬洪巖問：“如何實現一個高度是自適應寬度3倍的圖片？”

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

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

aspect-ratio效果

實現方法2: 巧用包含塊規則（padding和width屬性百分比值的計算基數是包含塊的寬度）+背景圖實現

利用包含塊規則實現

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

2.2 border-radius百分比和像素

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

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

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

來看下面這個示例：

<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

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

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

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

運動的水珠

**知識點：**如果沒有設置border-color，默認邊框顏色為所在元素的文本顏色。

2.3 BFC與margin折疊

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

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

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

創建BFC的常見CSS屬性值？

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

關于BFC更詳細的解讀可以參閱：

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

2.3.1 實例&解決方案

2.3.1.1 父子高度塌

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

高度塌陷

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

解決方案：

原因是父子組件的margin-top取最大值，上面例子中父子組件的包含塊都是body，屬于同一個BFC（html標簽）內的子元素，因此需要將父/子元素變成BFC（根據如上的創建BFC的CSS值設置），那么子元素的margin就會依賴父元素的左上角作為基準點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結構，所以不是最好的解決方法，更好的方法就是利用塌陷規則，增加margin-bottom/margin-top的值，直接計算得到兩塊元素之間的margin，并設置對應值。

三、Containing Block（包含塊）

包含塊內容可參閱文章《字節前端都知道的CSS包含塊規則》

四、box-sizing（盒模型）

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

盒子模型

盒模型有兩種，IE盒模型（border-box）和標準盒模型（content-box），其常用語法如下

// 默認為標準盒模型
box-sizing：border-box ｜ content-box

不同的盒模型影響HTML標簽在瀏覽器上實際渲染的屏幕像素面積，該屬性規定了border和padding屬性值是否占用width和height規定的內容區。

例如寬度width屬性的值計算規則如下：

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

一言以蔽之，content-box的寬高是規定內容區寬高，border-box的寬高規定了content+border+padding三者和的寬高

CSS盒模型

五、position（定位）

關于定位，必要明確的就是定位的基準點是哪兒？

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

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

line-height帶有單位時，計算行高的結果為line-height高度，line-height規定的是行高最小的的高度

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

line-height值為純數字時，當前行高會根據當前文本的 font-size*line-height 計算所得。

七、CSS選擇器

7.1 通用選擇器

.a.b：（無空格）當a和b在同一標簽類名中同時出現才選擇
.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）開頭。典型的應用場景是用來匹配語言簡寫代碼（如 zh-CN，zh-TW 可以用 zh 作為 value）。
[attr^=value]：表示帶有以attr命名的屬性，且屬性值是以value開頭的元素。
[attr$=value]：表示帶有以attr命名的屬性，且屬性值是以value結尾的元素。
[attr*=value]：表示帶有以attr命名的屬性，且屬性值至少包含一個 value 值的元素。

7.3 偽類選擇器

:root ：文檔根元素

八、文本處理

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

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

關于文本處理相關的CSS，知識點較多且深，因此將在后續文章將詳細解讀，因為文字處理屬于一個需要深入理解的領域，也是一個基礎領域，在大部分的場景我們是不需要關心，但是如果涉及到精細化展示、兼容性的問題，就不得不涉及到文本渲染原理相關內容。

九、flex布局

.box {
    display: flex;  /* 還可以設置行內元素的 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;  /* 定義項目在主軸上的對齊方式  flex-start左側，flex-end右側，center居中，space-between兩端對齊項目間隔相等，space-around項目左右兩側間距相同 */
    align-items: flex-start; /* 定義項目在縱軸上的對齊方式  flex-start上，flex-end下，center居中，baseline項目中第一行文字對齊，stretch默認值高度未設置時候將撐滿容器高度 */
}
.item {
    order: 0;   /* 定義項目的排列順序，數值越小越靠前，默認0 */
    flex-grow: 0;   /* 定義剩于空間的放大比例，默認0不放大，如果多個item均為1，則將等分剩于的空間，不同值按照比例分配剩于空間 */
    flex-shrink: 1; /* 定義項目縮小比例，默認為1，空間不足，均等比例縮小，為0則不縮小 */
    flex-basis: auto; /* 定義項目在分配剩于主軸空間之前的主軸占據的長度，瀏覽器會根據這個屬性去計算是否有剩于的空間 */
    /* flex: auto; 是flex-grow、flex-shrink和flex-basis的簡寫默認值：0 1 auto */
    align-self: flex-start; /* 設置單個項目與其他項目不一樣的對齊方式，可覆蓋父容器設置的align-items，默認auto繼承父元素的align-items值  auto | flex-start | flex-end | center | baseline | stretch */
}

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

十、自定義CSS屬性

example：

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

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

因為是新的屬性規則，在低版本設備上可能遇上不兼容情況，因此可以使用查詢特性的@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

總結

上述講到了十個大的CSS知識點，也是工作開發過程中經常會遇到的細節問題，把這些知識點/CSS規則熟記于心，有利于高效率編寫前端樣式！

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一篇文章帶你了解CSS單位相關知識

一、了解 CSS 單位

二、相對長度單位

1. 使用 em 單位

2. 使用 ex 單位

三、絕對長度單位

四、總結

一、width（寬）& height（高）

1.1 width與height的值

1.2 height:100%無效

二、padding（內邊距）& border（邊框）& magin（外邊距）

2.1 百分比單位計算

2.2 border-radius百分比和像素

2.3 BFC與margin折疊

2.3.1 實例&解決方案

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屬性

總結

您的項目需求