CSS的一些单位

andot 发布于2019-08-30 11:21 / 2166人阅读

摘要：你确定，是相对于父元素的大小在我们写样式修饰的时候，长度单位像是我们常用的。那么它们有什么不同的地方呢像素。

你确定，EM是相对于父元素的大小？

在我们写样式修饰的时候，长度单位像PX、EM、REM是我们常用的。那么它们有什么不同的地方呢？

1、PX

像素。相对长度单位，相对于显示器的屏幕分辨率的大小

IE无法调整那些使用px作为单位的字体大小

国外大部分的网站能够调整的原因在于其使用了em或者rem作为字体大小

2、em

em相对长度单位相对于当前对象内的文本字体大小尺寸

参考物是父元素的font-size

当前父元素没有设置字体尺寸，相对于浏览器的默认字体大小

em的值不是固定的

em会继承父级元素的字体大小

3、rem

rem是css3新增的一个相对单位，rem是相对于HTML根元素的字体大小的长度单位

优点只需要设置根目录的大小就可以把整个页面的的比例调好

兼容性 ie8 更早的版本

4、vw、vh

vw、vh、vmax、vmin 这四个单位基于视口

vw是相对视口的宽度而定的长度等于视口宽度的1/100

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

5、%（百分比）

一般来说就是相对于父元素

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

6、vm

css3新单位，相对于视口的宽度或高度中较小的那个

其中最小的那个被均分为100单位的vm

比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

缺点：兼容性差

混合云私有云 java的一些代码深度学习的一些应用 php实用的一些代码数据分析的一些方法

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

转载请注明本文地址：https://www.ucloud.cn/yun/114938.html

css单位

摘要：数字与单位之间不能出现空格。有两种类型的长度单位相对和绝对。是可视区宽度单位。以百分比为单位的长度值是基于具有相同属性的父元素的长度值。绝对长度单位视输出介质而定，不依赖于环境显示器分辨率操作系统等。 css有几个不同的单位表示长度一些设置css长度的属性有 width，height，margin，padding等长度有一个数字和单位组成如10px，2em，等。数字与单位之间不能...

longmon 2019-08-30 10:58 评论0 收藏0
css单位

摘要：数字与单位之间不能出现空格。有两种类型的长度单位相对和绝对。是可视区宽度单位。以百分比为单位的长度值是基于具有相同属性的父元素的长度值。绝对长度单位视输出介质而定，不依赖于环境显示器分辨率操作系统等。 css有几个不同的单位表示长度一些设置css长度的属性有 width，height，margin，padding等长度有一个数字和单位组成如10px，2em，等。数字与单位之间不能...

Lin_YT 2019-08-02 15:08 评论0 收藏0
CSS：7个你可能不认识的单位

摘要：原文译文个你可能不知道的单位译者众所周知，当使用技术的时候，很容被一些奇异问题给困住。今天，我就介绍一些你之前可能不知道的属性，是一些例如和测量方面的单位，但是很有可能你之前都没听过这些。然而，对于每一个问题，百分比并不是最好的解决方案。原文：7 CSS Units You Might Not Know About 译文：7个你可能不知道的CSS单位译者：dwqs 众所周知，...

peixn 2019-08-28 18:02 评论0 收藏0
CSS字体单位

摘要：所以，在网页字体中，使用和单位是更好的解决方案。一般来说，我在开始写网页的时候，会设置标签的字体大小为这样标签就是百分比的单位，然后再网页接下来使用单位。一、前言在CSS样式中，当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中，你有4种不同的选择，能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢？这个问题引发了各种各样不同的争论和评价。想要...

GeekQiaQia 2019-08-28 18:23 评论0 收藏0
基于px2rpx-loader，探讨一下loader的封装思想

摘要：本文以的源码为学习对象，了解其工作机制以及封装的思想。通过深入了解，我们总结了其封装的思路，顺带学习了一下的抽象语法树。本文以px2rpx-loader的源码为学习对象，了解其工作机制以及loader封装的思想。 1.前言最近在了解mpvue框架的时候，对于其能够实现一套代码兼容web和微信小程序（以下简称小程序）的能力十分着迷，虽然小程序的MINA框架有着Vue的影子，但是无可否认的，小...

番茄西红柿 2019-04-23 13:32 评论0 收藏0
无单位数字和行高 —— 别说你懂CSS相对单位

摘要：无单位数字和行高有一些属性可以接收不带单位的数值意思就是一个不带长度单位的数字，如和等于，等于，如此类推。警告不带单位的只可以表示长度单位和百分比的值，譬如和。段落继承了的行高。长度有两种类型绝对的和相对的。前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative ...

Airmusic 2019-08-29 16:06 评论0 收藏0