目录

一、长度单位

1.像素PX

2.百分比%

3.em

4.rem

5.vw

6.vh

二、颜色单位


一、长度单位

1.像素PX

它实际上是屏幕上的一个个小点,在正常情况下无法看到,只有当它放大到足够大时才可以看到。

100px=100个小点

PX是字体长度单位中最常用的,是固定单位。

2.百分比%

是相对单位,它是相对于其父元素内容区的宽高。

子元素的大小会随父元素大小而变化,我们管这种布局称为流式布局。

3.em

是相对单位,它是相对于其父元素字体大小而设置的。

1em=父元素1个font-size,若父元素没有字体大小,它就会继承祖先元素的字体大小,如果祖先元素没有设置,就会继承根标签的默认字体大小16px

4.rem

相对单位,只相对于根标签字体的大小

1rem=html的1个font-size

5.vw

viewport width 视口宽度

6.vh

viewport height 视口高度

其中vw和vh在日常当中很少用到

二、颜色单位

1.在CSS中可以直接使用颜色的单词来表示不同颜色,但其缺点明显,及其的不方便

2.使用RGB值来表示不同颜色

RGB(red,green,blue)通过三个色系不同浓度来组成颜色,浓度值的范围0--255.

3.使用RGBA来表示不同颜色

RGBA(red,green,blue,alpha),其中aloha为透明度,0--1之间

4.使用16进制的RGB值来表示颜色,原理和上面的RGB一样

语法:#红色的浓度绿色的浓度蓝色的浓度。

00表示最小值0,ff表示最大值255

当红色、绿色、蓝色用两位16进制表示时会有缩写。如:#ff00简写#f00

常用的16进制颜色:#f00红色   #0f0绿色   #00f蓝色    #ccc灰色    #f60橘色    #000黑色

5.HSL值、HSLA值

HSL值分别为色度、饱和度、亮度。A值代表透明的。

这两个颜色单位一般在工厂相关单位用的比较多。

HTML中字体相关单位相关推荐

  1. CAD中字体相关解析 \fsimhei|b0|i0|c134

    CAD中字体相关解析 \fsimhei|b0|i0|c134 之前在前人的文章上看过,我把用到的信息提取出来了,以供后面好查询,用到的老铁反手甩个赞吧. 在多行文字 MTEXT 中 TTF字体解析的编 ...

  2. html中字体的单位,CSS中字体单位:px、em、rem和%

    对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...

  3. ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配

    一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...

  4. php网页代码字体颜色设置,html和css中字体颜色设置的相关总结

    网页中颜色的运用是网页必不可少的一个元素.使用颜色目的在于有区别.有动感.美观之用,同时颜色也是各种各样网页的样式表现元素之一,所以在我们的日常开发中不管是前端还是后端都离开不字体颜色,那么我们今天就 ...

  5. web前端入门到实战:CSS中字体单位:px、em、rem和%

    对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...

  6. HTML网页上常见的3种单位是,HTML_CSS中常用的单位,一、长度单位 长度单位 - phpStudy...

    CSS中常用的单位 一.长度单位 长度单位是Web页设计中最常用的一个单位.一个排列无序.杂乱无章的页面不可能给人们留下什么好的印象.于是,在设计的时候需要为元素的位置.尺寸精确地定义一些值,以使其达 ...

  7. 平面设计中字体设计的重要性是什么

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 平面设计中字体设计的重要性是什么?文字在平面设计中有着举足轻重的地位.文字的设计可以变化各异,根据不同的字体.字号. ...

  8. 了解和使用CSS中的rem单位

    什么是雷姆单位? 在收听广播或音乐播放器之前,您可能遇到过" REM"一词.与他们的音乐同伴不同,它们在深度睡眠期间被称为"快速眼动",而CSS rem则代表& ...

  9. html中选择字体的元素,深入探讨CSS中字体元素

    深入探讨CSS中字体元素 更新时间:2006年09月25日 00:00:00   作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...

  10. 字体相关样式/ fontawesome库/阿里iconfont库的使用方法

    1.字体相关样式: 1.1 color 用来设置字体颜色 1.2 font-size 字体的大小, 和font-size相关的单位 em 相当于当前元素的一个font-size rem 相对于根元素的 ...

最新文章

  1. C语言的双向链表头插法和尾插法,指定节点删除
  2. ABP中的Filter(下)
  3. 二叉树深度优先遍历和广度优先遍历
  4. Java基础学习总结(10)——static关键字
  5. python 把一个列表分成等长的多个列表
  6. centos node跟npm 安装
  7. mysql设计与实现_mysql设计与开发
  8. 基于jQuery的对象切换插件:soChange 1.5 (点击下载)
  9. ztree java 增删改_Ztree实现增删改查
  10. php var_export与var_dump 输出的不同
  11. 浅论 C++ 的复杂性
  12. Classes and Objects :类和对象(2)
  13. 新版代shua社区源码(云商城1.0)
  14. Android 手机如何改造成 Linux 服务器?
  15. 简单动态网站的搭建流程
  16. ubuntu安装使用redis并设置开机启动
  17. 数字证书颁发及认证原理
  18. 编程初学者为什么要选择python语言,哪些人群适合使用python
  19. 基于gensim的Deep learning with paragraph2vec 官方models.doc2vec文档解释
  20. 测试必会Linux命令

热门文章

  1. Word中部分内容出现乱码、不显示页码和目录
  2. 用众城计算机弹学猫叫,19年真男神当众被逼学猫叫?谁能把我的童年还给我!...
  3. java几种锁_java中有几种锁
  4. pycharm关闭拼写检查
  5. 下一代网络NGN复习
  6. 金山毒霸系统清理专家
  7. Groovy实战分析
  8. 【全是干货!伸手党福利】通过银行卡号判断出所属银行信息
  9. python——【2】gzip模块二进制格式读取压缩文件
  10. し: make jianjie的文本网页