像素，百分比，em,rem,颜色单位的相关讲解。

像素和百分比。

（一）像素

首先你电脑的屏幕（显示屏）实际上是一个一个的小点点，也就是由一个一个像素构成，不同屏幕的像素大小是不同的，并且像素越小就越清晰
也就是说，同样的200像素在不同的设备上显示的效果不同。
例如：

同一张照片在你的电脑上二百个像素，而在有些手机上可能是八百个像素，也就是说手机上四个像素替换电脑上的一个像素，这样的照片就清晰很多。

（二）百分比

可以将设置的属性改变成相对于父元素的百分比

例如：


<!DOCTYPE html>
<html lang="zh">
<head><style>.box1{width: 100px;height: 100px;background-color: antiquewhite;}.box2{width: 50%;height: 50%;background-color: aqua;}</style></head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

这样就会出现以下场景

这样写有一个好处：给子元素用这种百分比的写法，就会使子元素随父元素的改变而改变。

em与rem

（一）em

如果你用em为单位，那么1em=16px

这是可以设置的

1em=1font-size

例如你可以这样写：

<head><style>.box1{font-size: 10px;width: 100em;height: 100em;background-color: antiquewhite;}</style>

这样显示出来的背景就是长宽为1000px

（二）rem

这是相对于根元素的，就是你需要设置html的font-size

例如：

 <head><style>html{font-size: 10;}</style></head>

同样的1rem=1font-size

颜色单位

在css中可直接使用颜色名设置：red，yellow，blue等等，但这样就会有一个弊端，一个是你把颜色很难记完，另一个就是有些颜色你根本无法表述。

在这里就要说到一个

（一）rgb值

这是通过三种颜色的浓度来调的：故名思意，red，green，blue。

每种颜色的调节浓度都是0到255之间，举个例子

<head><style>.box2{background-color: rgb(225, 0, 0);}</style>

这就是红色，其实就是光的三原色，三者都为零，就是黑色，三者都255就是白色。

（二）rgba

相比于rgb多了个a就是透明度，为1时显示为完全不透明，0时为完全透明。

像素，百分比，em,rem,颜色单位的相关讲解。相关推荐

px,em,rem,rpx 单位的用法和区别
px px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点 IE无法调整那些使用px作为单位的字体大小: 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体 ...
px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
选择器、像素和百分比、颜色单位、文档流-css基础
网页分成三部分: 结构(HTML) 表现(CSS) 行为(JavaScript) CSS: css是层叠样式表网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式.(是一种3D效果 ...
css百分比跟em的区别_查看CSS单位：像素，EM和百分比
单位在测量和建造房屋,桥梁或塔楼等物品方面起着重要作用,并且建造网站也不例外. Web上有多种测量方法,特别是CSS中的像素,EM和Percentage . 在本文中,我们将遍历这些单位,以进一步了解 ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...

像素，百分比，em,rem,颜色单位的相关讲解。

像素，百分比，em,rem,颜色单位的相关讲解。相关推荐

最新文章

热门文章