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

資訊專欄INFORMATION COLUMN

CSS 單位

ARGUS / 3507人閱讀

摘要：概覽中的長(zhǎng)度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會(huì)怎么樣這正是和單位所提供的。和現(xiàn)代瀏覽器都支持這兩個(gè)單位。

概覽

CSS中的長(zhǎng)度單位有很多，覺得有必要整理備忘。

網(wǎng)上介紹的也比較多和全，詳見參考資料。

單位大體分為兩大類：

絕對(duì)單位 ，不會(huì)因?yàn)槠渌氐某叽缱兓兓?/p>

相對(duì)單位 ，沒有一個(gè)固定的度量值，而是由其他元素尺寸來(lái)決定的相對(duì)值。

單位 類型 簡(jiǎn)介
px Absolute 像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn))，1px = 1/96in
pt Absolute Points, 1pt = 1/72in
pc Absolute Picas, 1pc = 12pt
in Absolute Inches, 1in = 96px = 2.54cm
cm Absolute Centimeters, 1cm = 96/2.54px
mm Absolute Millimeters, 1mm = 1/10cm
q Absolute Quarter-millimeters, 1q = 1/4mm
% Relative 相對(duì)于父元素的寬度或字體大小
em Relative 相對(duì)于父元素的字體大小
rem Relative (即root em) 相對(duì)于html標(biāo)簽的字體大小
ex Relative 當(dāng)前字體環(huán)境中 x 字母的高度
ch Relative 當(dāng)前字體環(huán)境中 0 數(shù)字的高度
vw Relative 1% 視口（瀏覽器可視區(qū)域）的寬度
vh Relative 1% 視口（瀏覽器可視區(qū)域）的高度
vmin Relative 1% 視口（瀏覽器可視區(qū)域）的寬度和高度中較小的尺寸
vmax Relative 1% 視口（瀏覽器可視區(qū)域）的寬度和高度中較大的尺寸

由于絕對(duì)單位是固定值，沒什么要介紹的，下面主要介紹相對(duì)單位。

%

相對(duì)于父元素的相同屬性的大小。這個(gè)其實(shí)談不上單位，但它畢竟可以作為長(zhǎng)度單位來(lái)使，所以在此列出。

如果用來(lái)設(shè)置字體，則相對(duì)的就是父元素的字體大小。

大多數(shù)瀏覽器中 和 標(biāo)簽中的默認(rèn)字體尺寸是100%.

html {font-size: 100%;}
body {font-size: 100%;}

100% = 1em = 16px = 12pt

如果用來(lái)設(shè)置寬和高等非字體尺寸，則以百分比為單位的長(zhǎng)度值是基于具有相同屬性的父元素的長(zhǎng)度值。




  
  JS Bin

再啰嗦一點(diǎn)關(guān)于父元素的問題：何為父元素，相對(duì)定位（relative），絕對(duì)定位（absolute），浮動(dòng)（float），固定（fixed）中如何找尋父元素？

由于HTML是樹形結(jié)構(gòu)，標(biāo)簽套標(biāo)簽，一般情況下的父子關(guān)系很明朗。

相對(duì)定位元素，它的父元素符合標(biāo)簽嵌套。

絕對(duì)定位元素，它的父元素是離它最近的定位元素（絕對(duì)定位，相對(duì)定位，固定，但不包括浮動(dòng)）或者視窗尺寸（沒找到定位元素時(shí)）。

浮動(dòng)元素，它的父元素也符合標(biāo)簽嵌套。

固定元素（特殊的絕對(duì)定位），它的父元素是視窗（瀏覽器默認(rèn)用來(lái)展示內(nèi)容的區(qū)域的尺寸，不是html 或body 的尺寸）。

注意一下絕對(duì)定位就行了，其他的相對(duì)簡(jiǎn)單。




  
  JS Bin

box 寬度為視窗的一半，can 的寬高是 box 的寬高的一半。

將 can 設(shè)置為 position: fixed; 則其父元素將不再是 box 而是瀏覽器視窗。

can 的寬高是視窗寬高的一半。

浮動(dòng)元素的父元素跟普通元素的父元素是一樣的。




  
  JS Bin

注意： padding、 margin 如果設(shè)置了百分比，上，下，左，右 用的都是父元素寬度 的值為標(biāo)準(zhǔn)去計(jì)算。

em 和 rem

兩者都是基于字體尺寸的，區(qū)別在于 em 是相對(duì)于當(dāng)前父元素的字體大小為標(biāo)準(zhǔn)，而 rem 是相對(duì)于 html 元素的字體大小為標(biāo)準(zhǔn)。

舉個(gè)例子你就明白了。




  
  JS Bin
  


  

    Test 
    

      Test 
      

        Test 
      

    

  

  

    Test 
    

      Test 
      

        Test

ex 和 ch

ex 和ch 單位，依賴于當(dāng)前字體font-family 和字體大小 font-size。 ex 指當(dāng)前字體環(huán)境中小寫字母x 的高度，ch 指當(dāng)前字體環(huán)境中數(shù)字 0 的寬度。

IE9+ 和現(xiàn)代瀏覽器都已經(jīng)支持。

vw 和 vh

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)很大程度上依賴于比例規(guī)則。然而，CSS比例不總是每個(gè)問題的最佳解決方案。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會(huì)怎么樣？這正是vh 和vw 單位所提供的。

vh 等于視窗高度的 1/100.例如，如果瀏覽器的高是 900px, 1vh 求得的值為 9px 。同理，如果顯示窗口寬度為 750px, 1vw 求得的值為 7.5px。

IE10＋ 和現(xiàn)代瀏覽器都支持這兩個(gè)單位。

vmin 和 vmax

這兩個(gè)單位是針對(duì)vw和vh

vmin 是vw和vh中比較 小 的值

vmax 是vw和vh中比較 大 的值

.box {
    height: 100vmin;
    width: 100vmin;
}


.box {
    height: 100vmax;
    width: 100vmax;
}

IE10+ 和現(xiàn)代瀏覽器都已經(jīng)支持 vmin

webkit瀏覽器之前不支持vmax，現(xiàn)在已經(jīng)支持，所有現(xiàn)代瀏覽器已經(jīng)支持，但是IE不支持 vmax.

總結(jié)

尺寸單位雖然說(shuō)不是很難的內(nèi)容，但能夠做到精準(zhǔn)理解和熟練使用也是極其難得的，也許隨著CSS的發(fā)展會(huì)有更多有用的單位引進(jìn)。

對(duì)單位斤斤計(jì)較是一個(gè)優(yōu)秀CSS使用者應(yīng)該具備的品質(zhì)，趕緊去挑選合適的單位去開發(fā)你的NB產(chǎn)品吧。

下面的代碼用來(lái)檢測(cè)您的瀏覽器是否支持常用單位：




  
  JS Bin
   
  



50% - percentage


400px - pixels (device pixels)


20em - relative unit


20rem - root em


15vw - viewport width


60vh - viewport height


60vmin - smaller of vw or vh


60vmax - larger of vw or vh


4in - inches


20cm - centimeters


200mm - millimeters


120pt - points


40pc - picas


60ex - x-height


60ch - based on width of zero (0) character
參考資料

關(guān)于CSS中的字體尺寸設(shè)置

七個(gè)你可能不了解的CSS單位

你可能沒注意的CSS單位

CSS的長(zhǎng)度單位

The Lengths of CSS —— Chris Coyier

Distance Units —— w3

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111213.html

相關(guān)文章

  • 聊一聊CSS中的長(zhǎng)度單位

    摘要：有的是日常生活中使用的單位，比如厘米和英寸有的是印刷行業(yè)使用的單位，比如和有的是專門為發(fā)明的單位，比如。但是，由于目前低端打印機(jī)的每英寸點(diǎn)數(shù)為，而高端屏幕的每英寸點(diǎn)數(shù)為，因此所謂的高分辨率可能介于兩者之間。。 CSS中有很多屬性可以接受長(zhǎng)度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...

    史占廣 評(píng)論0 收藏0

  • 無(wú)單位數(shù)字和行高 —— 別說(shuō)你懂CSS相對(duì)單位

    摘要：無(wú)單位數(shù)字和行高有一些屬性可以接收不帶單位的數(shù)值意思就是一個(gè)不帶長(zhǎng)度單位的數(shù)字，如和等于，等于，如此類推。警告不帶單位的只可以表示長(zhǎng)度單位和百分比的值，譬如和。段落繼承了的行高。長(zhǎng)度有兩種類型絕對(duì)的和相對(duì)的。 前段時(shí)間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對(duì)relative ...

    Airmusic 評(píng)論0 收藏0

  • 視口相關(guān)單位的應(yīng)用 —— 別說(shuō)你懂CSS相對(duì)單位

    摘要：還有視口相關(guān)單位，依賴瀏覽器的視口大小來(lái)定義長(zhǎng)度的。如果你不熟悉視口相關(guān)單位的話，在這里簡(jiǎn)單介紹一下。筆記視口相關(guān)單位對(duì)于大多數(shù)瀏覽器還是一項(xiàng)比較新的特性，所以當(dāng)你試圖把這個(gè)特性和其他樣式混搭時(shí)，有可能會(huì)有一些很奇怪的。 前段時(shí)間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對(duì)rel...

    lbool 評(píng)論0 收藏0

  • css單位

    摘要：數(shù)字與單位之間不能出現(xiàn)空格。有兩種類型的長(zhǎng)度單位相對(duì)和絕對(duì)。是可視區(qū)寬度單位。以百分比為單位的長(zhǎng)度值是基于具有相同屬性的父元素的長(zhǎng)度值。絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴于環(huán)境顯示器分辨率操作系統(tǒng)等。 css有幾個(gè)不同的單位表示長(zhǎng)度 一些設(shè)置css長(zhǎng)度的屬性有 width，height，margin，padding等 長(zhǎng)度有一個(gè)數(shù)字和單位組成 如10px，2em，等。數(shù)字與單位之間不能...

    longmon 評(píng)論0 收藏0

  • css單位

    摘要：數(shù)字與單位之間不能出現(xiàn)空格。有兩種類型的長(zhǎng)度單位相對(duì)和絕對(duì)。是可視區(qū)寬度單位。以百分比為單位的長(zhǎng)度值是基于具有相同屬性的父元素的長(zhǎng)度值。絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴于環(huán)境顯示器分辨率操作系統(tǒng)等。 css有幾個(gè)不同的單位表示長(zhǎng)度 一些設(shè)置css長(zhǎng)度的屬性有 width，height，margin，padding等 長(zhǎng)度有一個(gè)數(shù)字和單位組成 如10px，2em，等。數(shù)字與單位之間不能...

    Lin_YT 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

ARGUS

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<