css中的尺寸和單位

Yujiaao 發布于2019-08-02 14:08 / 3577人閱讀

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

前言

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

類型

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

相對單位

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

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

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

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

vh和vw，視口高度的1%和視口寬度的1%。可用來做可伸縮布局，但是兼容性沒有rem好。所以目前還是rem布局居多，vh和vw看到網易新聞有用到vw設置字體大小，不知道目的何在，不過vw確實可以用來做移動端布局

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

絕對單位

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

GPU云服務器云服務器服務器機柜和網絡機柜尺寸單位自建服務器和放上的區別 css和html html和css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53598.html

關于CSS中的字體尺寸設置

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

mcterry 2019-08-28 18:09 評論0 收藏0
css中的尺寸和單位

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

noONE 2019-08-30 15:55 評論0 收藏0
css中的尺寸和單位

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

cod7ce 2019-08-23 14:53 評論0 收藏0
CSS 單位

摘要：概覽中的長度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對單位，不會因為其他元素的尺寸變化而變化。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣這正是和單位所提供的。和現代瀏覽器都支持這兩個單位。概覽 CSS中的長度單位有很多，覺得有必要整理備忘。網上介紹的也比較多和全，詳見參考資料。單位大體分為兩大類：絕對單位，不會因為其他元素的尺寸變化而變化。相對...

ARGUS 2019-08-28 18:23 評論0 收藏0
【響應式布局】initial containing block、viewport以及相關尺寸

摘要：影響著其中元素的尺寸和定位。在標準中，元素的稱為。當的寬度高度使用百分數的值時，這個百分數的基準就是的尺寸。例子其中就溢出了的區域。造成以上不同的原因是，在桌面端的縮放和在移動端的縮放有不同的性質。這兩個數值的單位是設備獨立像素。前言本篇文章修改、整理自我以前寫的一篇文章。在閱讀這篇文章之前，你需要了解設備像素、邏輯像素（設備獨立像素）和CSS像素的區別，見我的前一篇文章理解設備...

weknow619 2019-08-30 15:54 評論0 收藏0