欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS 單位

CSS 單位

若您想讓某個(gè) HTML 元素在指定窗口顯示出您所期望的樣子，那么需要您為它設(shè)置 CSS 屬性并為該屬性指定一個(gè)具體的數(shù)值和單位，例如width屬性，font-size屬性。


CSS 中定義了兩種長(zhǎng)度單位類型：

  1. 絕對(duì)單位（ absolute ）

  2. 相對(duì)單位（ relative ）


以下代碼在屬性中設(shè)置測(cè)量單位：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    background: grey;
    color:white;
    width: 5cm;
    font-size:  20pt;
}
</style>
</head>
<body>
   <p>this is a test.</p>
</body>
</html>

要指定長(zhǎng)度，請(qǐng)將數(shù)字和單位標(biāo)識(shí)符連接在一起。

在上面的代碼中，width 屬性為5cm。 font-size （字體大小）屬性為20pt。

    絕對(duì)長(zhǎng)度

    這些單位是現(xiàn)實(shí)世界的測(cè)量單位。比如千米、米、厘米、毫米這樣固定的單位就被稱為絕對(duì)單位。 


    CSS 支持五種類型的絕對(duì)單位。

    單位標(biāo)識(shí)符描述
    in英寸
    cm厘米
    mm毫米
    pt點(diǎn)或磅 (1 點(diǎn) = 1/72 英寸)
    pc12點(diǎn)活字 (1 pc = 12 pt)

    您可以在樣式中混合和匹配單位，也可以混合絕對(duì)和相對(duì)單位。

    您可以混合和匹配單位。

    <!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { 
            width: 5cm; 
            font-size: 20pt; 
        } 
        </style> 
    </head> 
    <body> 
        <p>I like <span>HTML</span> and CSS. www.lofty888.cn</p> 
    </body> 
</html>


    注：

    • 絕對(duì)單位在網(wǎng)頁中很少使用，但在一些特殊場(chǎng)合使用絕對(duì)單位來解決問題還是很有必要的。

    相對(duì)長(zhǎng)度

    相對(duì)單位會(huì)根據(jù)一個(gè)不固定的參照值來測(cè)量決定顯示結(jié)果。比如：


    Snipaste_2020-07-02_10-50-51

    Snipaste_2020-07-02_10-51-12


    可以看到相對(duì)單位%根據(jù)父元素（藍(lán)綠色框框）的寬決定了子元素的顯示結(jié)果。而絕對(duì)單位px保持不變。


    CSS 定義了大范圍的相對(duì)測(cè)量。

    下表顯示了 CSS 在主流瀏覽器中定義和支持的相對(duì)單位。

    單位標(biāo)識(shí)符描述
    em相對(duì)于元素的字體大小
    ex相對(duì)于元素字體的“x-height”
    rem相對(duì)于根元素的字體大小
    px許多 CSS 像素(假定在 96dpi 顯示器上)
    %另一個(gè)屬性的值的百分比

    在以下示例中，height 屬性的值為2em。2em意味著p元素的高度是字體大小的兩倍。

    <!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { 
            font-size: 15pt; 
            height: 2em; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://www.lofty888.cn">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
        <p style="font-size:12pt">Font size 12pt.</p> 
    </body> 
</html>


    例子

    以下代碼顯示如何比較英寸和像素中的高度設(shè)置。

    <html>
<head>
<title>Pixels to Inches</title>
<style type="text/css">
div {
  background: #000;
  border: 1px solid rgb(128, 128, 128);
  color: white;
  font: 9px monospace;
  margin: 15px;
  text-align: center;
}
div#inches {
  width: 1in;
  height: 1in;
}
div#pixels {
  width: 96px;
  height: 96px;
}
</style>
</head>
<body>
  <div id="inches">&lt;-- 1 Inch --&gt;</div>
  <div id="pixels">&lt;-- 96 Pixels --&gt;</div>
</body>
</html>


    像素值

    一個(gè)容易設(shè)置的長(zhǎng)度是使用像素值。1 像素是 1/96 英寸。以下代碼設(shè)置字體大小和寬度的像素值。

    <!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { 
            background: grey; 
            color:white; 
            font-size: 20px; 
            width: 200px; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://www.lofty888.cn">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>


    百分比值

    您可以將度量單位表示為另一個(gè)屬性值的百分比。您可以使用 ％（百分比）單位。

    <!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { 
            background: grey; 
            color:white; 
            font-size: 200%; 
            width: 50%; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://www.lofty888.cn">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
    </body> 
</html>

    百分比值的一個(gè)很好的功能是，當(dāng)您調(diào)整瀏覽器窗口的大小時(shí)，值正在更新。


    相對(duì)于字體大小

    以下代碼使用相對(duì)單位。

    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    background: grey;
    color:white;
    font-size:  15pt;
    height: 2em;
}
</style>
</head>
<body>
    <p>This is a test.</p>
    <p style="font-size:12pt">This is another test.</p>
</body>
</html>

    上面的代碼將height屬性設(shè)置為2em，這意味著p元素的高度是字體大小的兩倍。

    第一個(gè)p元素的字體大小為15pt。第二個(gè)p元素的font-size為12pt。


    派生自其他相對(duì)值

    您可以使用相對(duì)單位來表示另一個(gè)相對(duì)度量的倍數(shù)。

    以下示例顯示 height 屬性以em單位表示。em單位派生自 font-size屬性的值，其使用rem單位表示。

    <!DOCTYPE HTML>
<html>
<head>
<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 href="http://www.lofty888.cn">website</a>
   <p>This is a test.</p>
   <a href="https://w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>

    上述示例分配的絕對(duì)字體大小為 0.2 英寸。

    rem單位是相對(duì)于字體大小的 HTML 元素，也稱為根元素。

    font-size值2rem意味著字體大小將是根元素字體 0.4 英寸的大小的兩倍。

    相同樣式中的height屬性被指定為2em，這是再次的兩倍。這意味著瀏覽器將使用高度為0.4英寸的字體顯示p元素，并且整體元素將為 0.8 英寸高。

    另一個(gè)與字體相關(guān)的相對(duì)單位是ex，1ex大約為0.5em。


    像素

    主流瀏覽器將 1 個(gè)像素視為 1/96 英寸。

    下面的代碼演示了如何指定 CSS 樣式中的像素。

    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p  {
    background: grey;
    color:white;
    font-size:  20px;
    width:  200px;
}
</style>
</head>
<body>
   <p>This is a test.</p>
</body>
</html>

    px 單位更靈活。你只需要改變字體的大小，其余的風(fēng)格無縫地工作。


    百分比

    您可以將度量單位表示為另一個(gè)屬性值的百分比。

    您可以使用%（百分比）單位。

    以下代碼將單位表示為另一個(gè)屬性值的百分比。

    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
    background: grey;
    color:white;
    font-size: 200%;
    width: 50%;
}
</style>
</head>
<body>
    <a href="http://www.lofty888.cn">website</a>
    <p>this is a test.</p>
    <a href="https://w3.org" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>