css中的尺寸和单位

noONE 发布于2019-08-30 15:55 / 3551人阅读

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。

前言

本文主要介绍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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117298.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...

cod7ce 2019-08-23 14:53 评论0 收藏0
css中的尺寸和单位

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。前言本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn 类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, m...

Yujiaao 2019-08-02 14:08 评论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