成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css中的尺寸和單位

noONE / 3632人閱讀

摘要：前言本文主要介紹的尺寸和單位，專門查了加上自己的一些理解。比如等屬性的類型分為絕對(duì)單位和相對(duì)單位相對(duì)單位相對(duì)單位代表以其他距離為尺寸的一種單位，包括，，，，。

前言

本文主要介紹css的尺寸和單位，專門查了mdn, 加上自己的一些理解。本文參考mdn

類型

length表示距離尺寸的一種css數(shù)據(jù)格式,它由數(shù)值+單位組成，如果數(shù)值為0，單位可以省略。比如width, height, margin, font-size,text-shadow等屬性, css的length類型分為絕對(duì)單位和相對(duì)單位

相對(duì)單位

相對(duì)單位代表以其他距離為尺寸的一種單位，包括em，rem，ex，lh，rlh。這幾個(gè)單位沒什么好說的，不知道自己查文檔。我主要來說下和視口相關(guān)的幾個(gè)相對(duì)單位的使用：vw，vh，vi，vb，vmax，vmin
提出中文mdn文檔的一個(gè)錯(cuò)誤： 當(dāng)視口的大小被修改（通過更改桌面計(jì)算機(jī)窗口大小或旋轉(zhuǎn)手機(jī)或平板設(shè)備的方向）時(shí)，只有基于Gecko的瀏覽器才動(dòng)態(tài)更新視口值，只有基于Gecko的瀏覽器才能動(dòng)態(tài)更新視口值，可以測(cè)試一下，說法并不正確:
經(jīng)測(cè)試在chrome, IE7以上都是正常的，中文文檔誤人:-D

    window.onresize = function () {
        console.log(document.documentElement.clientWidth || document.body.clientWidth);
    }

指出中文mdn文檔的另外一個(gè)錯(cuò)誤如果html和body設(shè)置了overflow:auto，滾動(dòng)條占據(jù)的空間不會(huì)從視口中減去（譯者注：大概就是說會(huì)算在視口里，視口大小是包括滾動(dòng)條的），但當(dāng)設(shè)置為overflow:scroll時(shí)，滾動(dòng)條占據(jù)的空間反而會(huì)從視口中減去（譯者注：大概就是此時(shí)視口大小不包括滾動(dòng)條）。, 明顯又是一個(gè)誤導(dǎo):-D。英文文檔里沒有這兩點(diǎn)，英文不好的話，就中英文一塊看吧

vi和vb，vi是沿著包含塊的內(nèi)聯(lián)軸方向尺寸的1%，vb是包含擴(kuò)沿著包含塊的塊軸方向尺寸的1%
對(duì)這兩個(gè)單位的兼容性比較差，基本在所有瀏覽器上都不兼容。但是這兩個(gè)單位引出了兩個(gè)比較有趣的概念包含塊和塊軸，內(nèi)聯(lián)軸

vh和vw，視口高度的1%和視口寬度的1%?？捎脕碜隹缮炜s布局，但是兼容性沒有rem好。所以目前還是rem布局居多，vh和vw看到網(wǎng)易新聞?dòng)杏玫絭w設(shè)置字體大小，不知道目的何在，不過vw確實(shí)可以用來做移動(dòng)端布局

vmin，vmax, 視口寬度和高度之間的最小值的1%，視口寬度和高度之間的最大值的1%

絕對(duì)單位

絕對(duì)單位包括px，pt，in, mm, cm等。絕對(duì)單位這種翻譯容易造成誤解。比如《css編程指南》中對(duì)于絕對(duì)單位的描述：絕對(duì)單位其實(shí)也是一種相對(duì)單位，

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

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

相關(guān)文章

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

    摘要：常用單位在中可以用很多不同的方式來設(shè)定字體的尺寸。當(dāng)你為一個(gè)元素添加單位時(shí)，應(yīng)當(dāng)考慮到所有父元素的字體尺寸。例寬度是中新提出的一個(gè)單位，通過寬度來計(jì)算字體尺寸。 個(gè)人翻譯，轉(zhuǎn)載請(qǐng)注明出處 英文原文：CSS Font Sizing 寫在前面 上一篇文章如何做好移動(dòng)端的響應(yīng)式設(shè)計(jì)：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設(shè)定字體...

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

  • css中的尺寸和單位

    摘要：前言本文主要介紹的尺寸和單位，專門查了加上自己的一些理解。比如等屬性的類型分為絕對(duì)單位和相對(duì)單位相對(duì)單位相對(duì)單位代表以其他距離為尺寸的一種單位，包括，，，，。 前言 本文主要介紹css的尺寸和單位，專門查了mdn, 加上自己的一些理解。本文參考mdn 類型 length表示距離尺寸的一種css數(shù)據(jù)格式,它由數(shù)值+單位組成，如果數(shù)值為0，單位可以省略。比如width, height, m...

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

  • css中的尺寸和單位

    摘要：前言本文主要介紹的尺寸和單位，專門查了加上自己的一些理解。比如等屬性的類型分為絕對(duì)單位和相對(duì)單位相對(duì)單位相對(duì)單位代表以其他距離為尺寸的一種單位，包括，，，，。 前言 本文主要介紹css的尺寸和單位，專門查了mdn, 加上自己的一些理解。本文參考mdn 類型 length表示距離尺寸的一種css數(shù)據(jù)格式,它由數(shù)值+單位組成，如果數(shù)值為0，單位可以省略。比如width, height, m...

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

  • CSS 單位

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

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

  • 【響應(yīng)式布局】initial containing block、viewport以及相關(guān)尺寸

    摘要：影響著其中元素的尺寸和定位。在標(biāo)準(zhǔn)中，元素的稱為。當(dāng)?shù)膶挾雀叨仁褂冒俜謹(jǐn)?shù)的值時(shí)，這個(gè)百分?jǐn)?shù)的基準(zhǔn)就是的尺寸。例子其中就溢出了的區(qū)域。造成以上不同的原因是，在桌面端的縮放和在移動(dòng)端的縮放有不同的性質(zhì)。這兩個(gè)數(shù)值的單位是設(shè)備獨(dú)立像素。 前言 本篇文章修改、整理自我以前寫的一篇文章。 在閱讀這篇文章之前，你需要了解設(shè)備像素、邏輯像素（設(shè)備獨(dú)立像素）和CSS像素的區(qū)別，見我的前一篇文章理解設(shè)備...

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

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

0條評(píng)論

閱讀需要支付1元查看
<