国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS中常見的長度單位

rainyang / 2294人閱讀

摘要：可視區(qū)高度單位和可視區(qū)寬度單位單位與可視區(qū)的高度相關(guān)。的值等于可視區(qū)高度的。因此會隨著父元素對應(yīng)的長度值得變化而變化。

px - 像素

px 是 CSS 中最常用的長度單位，可以用來指定字體大小，元素的寬度、高度、邊框、內(nèi)邊距，外邊距的大小等等, 它是一個虛擬長度單位，是計算機系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI

px 單位的值必須是整數(shù)值

與px相關(guān)的一些單位

in - 表示英寸，是一個物理單位，在CSS中被直接映射成為px; 轉(zhuǎn)換的方法是 1in = 96px

cm - 表示厘米，在生活中常用的單位，同樣被映射為 px; 轉(zhuǎn)換方法為 1cm = 37.8px

mm - 表示毫米，與cm類似，轉(zhuǎn)換方法為 1mm = 0.1cm = 3.78px

em 與 rem

em 單位的值等于基本元素或父元素的字體大小。

例如，如果父元素的字體大小為16px，則所有直接子元素中的1em值將計算為16px?；诨締卧闹R，可以很方便的增大或減小子元素的字體大小。 這里的值不需要是整數(shù)。

使用em可以輕松地將各種元素的字體大小保持在固定比例。

例如，如果父元素的font-size的值為50px，則將子元素的字體大小設(shè)置為2em, 相當于設(shè)置為100px。 類似的，將它設(shè)置為0.5em將使得子元素的字體大小為25px。

另外有一點需要注意：如果想要通過 em 設(shè)置當前元素的大小值，并且不是相對于直接父元素，而是相對父元素的父元素或者根元素，就會變得很復(fù)雜，因為每一層都要進行計算

例如:


    

        

    


.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5em;
}

.child2 {
    font-size: 1.2em;
}

那么就需要經(jīng)過計算: child1的字體大小為 20 x 1.5 = 30px, 而 child2 的字體大小就等于 20 x 1.5 x 1.2 = 36px

rem 也是一個相對單位，與 em 的不同點在于rem的長度總是相對于根元素, 而不是像 em 使用級聯(lián)的方式來計算尺寸。這種單位使用起來就簡單很多

同樣是上面的例子，不過使用的單位是 rem


    

        

    


.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5rem;
}

.child2 {
    font-size: 1.2rem;
}

那么就需要經(jīng)過計算: child1的字體大小為 16 x 1.5 = 24px, 而 child2 的字體大小就等于 16 x 1.2 = 19.2px; 這里為什么是使用 16 來乘而不是 20 呢？這就是因為rem的長度總是相對于根元素, 就是指 html, 而 html文檔中默認字體大小為 16px, 因此這里使用 16來計算

可視區(qū)相對長度單位

可視區(qū)相對長度 基于 視圖窗口或視口(屏幕上的可視區(qū)域或者框架)的寬度和高度。

可視區(qū)高度單位（vh）和可視區(qū)寬度單位（vw）

vh單位與可視區(qū)的高度相關(guān)。vh的值等于可視區(qū)高度的1/100。如果我們要根據(jù)瀏覽器窗口的高度來調(diào)整元素，這個單位是有用的。 例如，如果可視區(qū)的高度是400px，則1vh等于4px。 如果可視區(qū)高度為800px，則1vh等于8px。

類似的，vw單位與可視區(qū)的寬度相關(guān)。 因此可以推算1vw的值。 1vw就等于可視區(qū)寬度的1/100。 例如，如果窗口的寬度為1200px，則1vw將為12px。

vmin 和 vmax

vmin 是當前 vm 和 vh 中較小的一個值，也就是說，是可視區(qū)域較小的一邊的1/100的長度； 例如：可視區(qū)大小為 1000x800, 則 wmin = 800/100 = 8px; 如果可視區(qū)大小為 600x800, 則 wmin = 600/100 = 6px;

類似的, wmax 是當前 vm 和 vh 中較大的一個值，也就是說，是可視區(qū)域較大的一邊的1/100的長度； 例如：可視區(qū)大小為 1000x800, 則 wmin = 1000/100 = 10px; 如果可視區(qū)大小為 600x800, 則 wmin = 800/100 = 8px;

百分比表示的長度

以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。因此會隨著父元素對應(yīng)的長度值得變化而變化。例如：設(shè)置父元素的寬度為 100px, 設(shè)置直接子元素的寬度為 50%，則子元素的寬度為 50px;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111832.html

相關(guān)文章

  • [譯]HTML&CSS Lesson3: 了解CSS

    摘要：我們會在組合選擇器中來了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會分別對不同類型的選擇器進行計數(shù)。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語言，擁有相當?shù)拇竽芰Α?它我們允許為頁面添加布局和設(shè)計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...

    lavnFan 評論0 收藏0

  • [譯]HTML&CSS Lesson3: 了解CSS

    摘要：我們會在組合選擇器中來了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會分別對不同類型的選擇器進行計數(shù)。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語言，擁有相當?shù)拇竽芰Α?它我們允許為頁面添加布局和設(shè)計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...

    soasme 評論0 收藏0

  • css專業(yè)術(shù)語筆記

    摘要：屬性如等，稱作的屬性。如屬性值屬性冒號后面的所有內(nèi)容統(tǒng)一稱為屬性值。例如聲明屬性名加上屬性值就是聲明例如聲明塊聲明塊是花括號包裹的一系列聲明，例如規(guī)則或規(guī)則集出現(xiàn)了選擇器，而且后面還跟著聲明塊。1. 屬性 如height、color等，稱作css的屬性。 2. 值 在css中，如：10px, 50%, #ccc等這些都稱作css的值。比較常見的類型值有：整數(shù)值，數(shù)值，百分比值，長度值，顏色值...

    番茄西紅柿 評論0 收藏0

  • CSS通用數(shù)據(jù)類型

    摘要：相反的，通用數(shù)據(jù)類型并不和任何特定的屬性相關(guān)聯(lián)。本文，我將整體講述一下所有的通用數(shù)據(jù)類型。這樣以來就能夠避免和字符串數(shù)據(jù)類型混淆。距離距離數(shù)據(jù)類型表示距離的單位，有兩種長度單位。漸變函數(shù)使用數(shù)據(jù)類型來定義。 CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識別一個值是否有效，則需要確認該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數(shù)據(jù)類型，在規(guī)范中用的...

    Elle 評論0 收藏0

  • CSS通用數(shù)據(jù)類型

    摘要：相反的，通用數(shù)據(jù)類型并不和任何特定的屬性相關(guān)聯(lián)。本文，我將整體講述一下所有的通用數(shù)據(jù)類型。這樣以來就能夠避免和字符串數(shù)據(jù)類型混淆。距離距離數(shù)據(jù)類型表示距離的單位，有兩種長度單位。漸變函數(shù)使用數(shù)據(jù)類型來定義。 CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識別一個值是否有效，則需要確認該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數(shù)據(jù)類型，在規(guī)范中用的...

    Markxu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<