炸金花棋牌送28元

書名： HTML5權威指南
作者名： (美)Adam Freeman
本章字數： 2718字
更新時間： 2020-01-10 15:29:16

4.4 CSS中的長度

許多CSS屬性要求為其設置長度值。width屬性和font-size屬性就是這方面的例子。前者用于設置元素的寬度，后者用于設置元素內容的字號。代碼清單4-19所示樣式用到了這兩個屬性。

代碼清單4-19 為屬性設置長度值

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
width: 5cm;
font-size: 20pt;
                  }
              </style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" >Visit the W3C website</a>
            </body>
        </html>

設置長度值時，應讓數字和單位標識符連在一起，二者之間不加空格或其他字符。代碼清單中將width屬性值設置為5cm，這表示5個由標識符cm（厘米）代表的單位的長度。同樣，將font-size屬性值設置為20pt，表示20個由標識符pt（磅，稍后會有介紹）代表的單位的長度。CSS規定了兩種類型的長度單位，一種是絕對單位，另一種是與其他屬性掛鉤的相對單位。下面介紹這兩種單位。

4.4.1 絕對長度

上一個代碼清單中使用的cm和pt這兩個單位都屬于絕對單位。這類單位是現實世界的度量單位。CSS支持五種絕對單位，如表4-6所示。

表4-6 CSS中的絕對單位

一條樣式中可以混合使用多種單位，包括混合使用絕對單位和相對單位。如果能預先知道內容的呈現方式（例如為供打印的文檔設計樣式），那么絕對單位很有用處。我設計CSS樣式不怎么使用絕對單位。個人認為相對單位更靈活、更容易管理，而且我也很少創作需要與現實世界度量掛鉤的內容。

提示

讀者可能會奇怪表中怎么沒有像素這個單位。實際上，CSS試圖把像素作為相對度量單位處理，然而事與愿違。本章稍后會解釋這個問題，詳情參見4.2節中的“像素單位的問題”。

4.4.2 相對長度

相對長度的規定和實現都比絕對長度更復雜，需要以嚴密、精確的語言明確定義。相對單位的測量需要依托其他類型的單位。可惜CSS規范的語言還沒那么精確（這個問題已經困擾CSS多年）。因此盡管CSS規定了許多既有趣又有用的相對單位，但是其中一些單位還沒有得到瀏覽器廣泛、一致的支持，用戶還無法使用。表4-7列出了主流瀏覽器支持的一些CSS相對單位。

表4-7 CSS相對單位

下面來看如何用這些單位表示長度。

1．與字號掛鉤的相對單位

使用相對單位時所設置的實際上是另一種度量值的倍數。先來看看與字號掛鉤的相對單位。代碼清單4-20即為一例。

代碼清單4-20 使用相對單位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
font-size: 15pt;
                      height: 2em;
                  }
              </style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <pstyle=" font-size:12pt">I also like mangos and cherries.</p>
              <a class="myclass1 myclass2" >Visit the W3C website</a>
            </body>
        </html>

本例將height屬性值設置為2em，意思是p元素在屏幕上顯示出來的高度應為字號的兩倍。這個倍數是在顯示每個元素的時候計算出來的。本例在style元素中為p元素的font-size設置了默認值15pt，然后又在文檔中第二個p元素的內嵌樣式里將該屬性值設置為12pt。這些元素在瀏覽器中的顯示結果見圖4-15。

圖4-15 使用相對單位的效果

相對單位還可以用來表示另一個相對單位的倍數。代碼清單4-21所示例子中，height屬性值使用的單位是em，這個單位是從font-size屬性值推算而得，而font-size屬性值在此使用的單位是rem。

代碼清單4-21 使用從另一相對單位推算出來的相對單位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
html {
font-size: 0.2in;
}
                  p {
                      background: grey;
                      color:white;
font-size: 2rem;
height: 2em;
                  }
              </style>
            </head>
            <body style="font-size: 14pt">
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" >Visit the W3C website</a>
            </body>
        </html>

rem單位根據html元素（文檔的根元素）的字號而定。本例用一條文檔內嵌樣式（使用直接在html元素的style屬性中定義的元素內嵌樣式也行）將html元素的字號設置為0.2英寸（這是一個絕對單位）。在另一條樣式中，font-size屬性值被設置為2rem，這表示使用該值的所有元素的字號將是根元素字號的兩倍——0.4英寸。這條樣式中的height屬性被設置為2em，這又翻了一番。于是p元素在瀏覽器中將以0.4英寸的字號顯示，其高度則是0.8英寸。從圖4-16中可以看到瀏覽器處理這些樣式的方式。

圖4-16 根據其他相對單位定義的單位

第三個與字體相關的相對單位是ex。這個單位指的是當前字體的x高度，也即字體基線到中線之間的距離，一般與字母x的高度相當（所以得了這么一個名稱），通常1ex大致等于0.5em。

2．像素單位的問題

CSS中的像素恐怕不是你心里想的那樣。像素這個術語一般是指顯示設備上可尋址的最小單元——圖像的基本元素。CSS卻是另辟蹊徑，其像素定義如下：

參考像素是距讀者一臂之遙的像素密度為96dpi的設備上一個像素的視角（visual angle）。

這正是CSS中那種令人頭疼的含糊定義。我無意數落誰，只不過要靠用戶臂長來度量的規范未免有點離譜。好在主流瀏覽器都沒有理會CSS定義的像素和顯示設備的像素之間的差別，它們將1像素視為1英寸的1/96（這是Windows系統的標準像素密度。有些平臺的顯示設備具有不同的像素密度，它們的瀏覽器通常要做些轉換工作，讓1像素仍然大約等于1英寸的1/96）。

提示

CSS像素的完整定義參見www.w3.org/TR/CSS21/syndata.html#length-units。不過它恐怕派不上什么用場。

這樣一來，盡管CSS像素原想定義為相對度量單位，結果卻被瀏覽器當成絕對單位對待。代碼清單4-22中的CSS樣式使用的就是像素單位。

代碼清單4-22 在樣式中使用像素單位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
font-size: 20px;
width: 200px;
                  }
              </style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" >Visit the W3C website</a>
            </body>
        </html>

這個例子中font-size和width屬性的值都使用了像素單位。圖4-17顯示了瀏覽器應用這些樣式的效果。

圖4-17 使用像素單位

提示

我在CSS樣式中也經常使用像素單位，但這只是一種積習而已。其實em單位更加靈活。如果采用em單位，那么需要修改樣式設計時只消改一下字號即可，樣式的其他部分一切如常。記住，CSS像素原本是個相對單位，但在實際使用中卻變成了絕對單位，因此就沒那么靈活了。

3．百分比單位

可以把一個度量單位表示為其他屬性值的百分比，這正是%單位的用途，如代碼清單4-23所示。

代碼清單4-23 以其他屬性值的百分比為單位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
font-size: 200%;
width: 50%;
                  }
              </style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" >Visit the W3C website</a>
            </body>
        </html>

使用百分比單位會遇到兩個麻煩。一是并非所有屬性都能用這個單位。二是對于能用百分比單位的屬性，那個百分比掛鉤的其他屬性各不相同。例如，對于font-size屬性，掛鉤的是元素繼承到的font-size值；而對于width屬性，掛鉤的則是元素的包含塊的寬度。

這些問題其實沒那么復雜。包含塊（這是一個反復出現的重要概念）留待第16章介紹。此外，后面（從第19章起）逐一介紹CSS屬性時，將會說明哪些CSS屬性支持百分比單位，以及百分比是根據什么屬性值計算的。

4．未獲廣泛支持的CSS屬性

除了前面羅列的那些相對單位，CSS還定義了其他一些單位，但是它們還未獲得廣泛支持。這些新單位都列在表4-8中。假如得到廣泛、一致的實現，這些單位會很有用，不過在此之前最好敬而遠之。

表4-8 缺乏瀏覽器支持的CSS相對度量單位

① 這個單位已被重命名為vmin，同時還增加了另一個單位vmax。這兩個單位分別等于vw和vh中較小和較大的那個。——譯者注

vw、vh、vm這三個單位應用前景廣闊，但目前只在IE中得到了實現。而且，據我粗略觀察，IE中的實現方式不太符合CSS規范。

5．用算式作值

允許將CSS屬性值設置為算式是CSS3定義的一個引人關注的特性。這種靈活手段在控制能力和精確程度方面都給樣式設計工作提供了幫助。代碼清單4-24即是一例。

代碼清單4-24 以算式為值

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
                      font-size: 20pt;
                      width: calc(80% -20px);
                  }
              </style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" >Visit the W3C website</a>
            </body>
        </html>

算式包含在關鍵字calc之后的括號之中。在其中可以混合使用各種單位進行基本的算術運算。別高興得太早，在撰寫本書的時候，支持calc()這個特性的只有IE。未得到廣泛支持的特性本書一般都避而不談，不過我相信這個特性會得到大家認可，其采用情況值得持續關注。

官术网_书友最值得收藏!

HTML5權威指南

4.4 CSS中的長度

4.4.1 絕對長度

4.4.2 相對長度