css中的尺寸和單位

Yujiaao 發(fā)布于2019-08-02 14:08 / 3633人閱讀

摘要：前言本文主要介紹的尺寸和單位，專門查了加上自己的一些理解。比如等屬性的類型分為絕對(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è)單位沒(méi)什么好說(shuō)的，不知道自己查文檔。我主要來(lái)說(shuō)下和視口相關(guān)的幾個(gè)相對(duì)單位的使用：vw，vh，vi，vb，vmax，vmin
提出中文mdn文檔的一個(gè)錯(cuò)誤：當(dāng)視口的大小被修改（通過(guò)更改桌面計(jì)算機(jī)窗口大小或旋轉(zhuǎn)手機(jī)或平板設(shè)備的方向）時(shí)，只有基于Gecko的瀏覽器才動(dòng)態(tài)更新視口值，只有基于Gecko的瀏覽器才能動(dòng)態(tài)更新視口值，可以測(cè)試一下，說(shuō)法并不正確:
經(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ì)從視口中減去（譯者注：大概就是說(shuō)會(huì)算在視口里，視口大小是包括滾動(dòng)條的），但當(dāng)設(shè)置為overflow:scroll時(shí)，滾動(dòng)條占據(jù)的空間反而會(huì)從視口中減去（譯者注：大概就是此時(shí)視口大小不包括滾動(dòng)條）。, 明顯又是一個(gè)誤導(dǎo):-D。英文文檔里沒(méi)有這兩點(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%。可用來(lái)做可伸縮布局，但是兼容性沒(méi)有rem好。所以目前還是rem布局居多，vh和vw看到網(wǎng)易新聞?dòng)杏玫絭w設(shè)置字體大小，不知道目的何在，不過(guò)vw確實(shí)可以用來(lái)做移動(dòng)端布局

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

絕對(duì)單位

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

云服務(wù)器 GPU云服務(wù)器服務(wù)器機(jī)柜和網(wǎng)絡(luò)機(jī)柜尺寸單位自建服務(wù)器和放上的區(qū)別 css和html html和css

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

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

相關(guān)文章

CSS 單位

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

ARGUS 2019-08-28 18:23 評(píng)論0 收藏0
構(gòu)建自適應(yīng)的手機(jī)頁(yè)面

摘要：從事開(kāi)發(fā)好多年，但是手機(jī)頁(yè)面開(kāi)發(fā)較晚，所以最開(kāi)始的時(shí)候，為了做微信應(yīng)用的開(kāi)發(fā)，各種餓補(bǔ)，但是為了將設(shè)計(jì)稿精準(zhǔn)的適配在各種尺寸的手機(jī)上還是太坑，所以找了些資料后，借鑒了一些成熟的網(wǎng)站，分享出來(lái)，歡迎拍磚。從事PC Web開(kāi)發(fā)好多年，但是手機(jī)頁(yè)面開(kāi)發(fā)較晚，所以最開(kāi)始的時(shí)候，為了做微信應(yīng)用的開(kāi)發(fā)，各種餓補(bǔ)，但是為了將設(shè)計(jì)稿精準(zhǔn)的適配在各種尺寸的手機(jī)上還是太坑，所以找了些資料后，借鑒了一些成...

itvincent 2019-08-21 10:30 評(píng)論0 收藏0
CSS尺寸單位介紹

摘要：前端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)中常見(jiàn)的幾種尺寸單位進(jìn)行逐一介紹在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及介紹基本概念以下概念讀起來(lái)可能有些晦澀，如果看不懂也沒(méi)關(guān)系像素它不是自然界的物理長(zhǎng)度，指基本原色素及其灰度的基本編碼。前端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)css中常見(jiàn)的幾種尺寸單位px,em,rem,rpx進(jìn)行逐一介紹在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及...

AlanKeene 2019-08-23 15:53 評(píng)論0 收藏0
CSS尺寸單位介紹

摘要：前端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)中常見(jiàn)的幾種尺寸單位進(jìn)行逐一介紹在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及介紹基本概念以下概念讀起來(lái)可能有些晦澀，如果看不懂也沒(méi)關(guān)系像素它不是自然界的物理長(zhǎng)度，指基本原色素及其灰度的基本編碼。前端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)css中常見(jiàn)的幾種尺寸單位px,em,rem,rpx進(jìn)行逐一介紹在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及...

zhaot 2019-08-30 15:56 評(píng)論0 收藏0
CSS尺寸單位介紹

摘要：前端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)中常見(jiàn)的幾種尺寸單位進(jìn)行逐一介紹在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及介紹基本概念以下概念讀起來(lái)可能有些晦澀，如果看不懂也沒(méi)關(guān)系像素它不是自然界的物理長(zhǎng)度，指基本原色素及其灰度的基本編碼。前端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)css中常見(jiàn)的幾種尺寸單位px,em,rem,rpx進(jìn)行逐一介紹在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及...

2shou 2019-08-02 14:29 評(píng)論0 收藏0
Web網(wǎng)頁(yè)布局的主要方式

摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁(yè)面元素位置發(fā)生改變，但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。一、靜態(tài)布局（static layout）　　即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。 1、布局特點(diǎn) 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局始終按照最初寫代碼時(shí)的布局來(lái)顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

blastz 2019-08-30 13:50 評(píng)論0 收藏0