CSS 的数值与单位px\em\%

简介: CSS 的数值与单位px\em\%

你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。

颜色值

在网页中的颜色设置是非常重要,有字体颜色,背景颜色,边框颜色等,设置颜色的方法也有很多:

1.英文命名颜色

p {
  color: pink;
}
/*给p标签的字体颜色设置为粉色*/

2.RGB 颜色

由 Red、Green、Blue 三种颜色的比例来配色,简称 RGB。

p {
  color: rgb(154, 32, 432);
}

每一项的值可以是 0~255 之间的整数,也可以是 0~100% 的百分数,如:

p {
  color: rgb(30%, 20%, 40%);
}

3.十六进制颜色

现在较为普遍的颜色使用法,其原理其实也是 RGB 设置,但是其每一项的值由 0~255 变成了十六进制 00-ff。

p {
  color: #00eeff;
}

长度值

长度单位总结了几种常用单位:px,em,%,这三种单位都是相对单位。

1.像素

px 像素(Pixel)。相对长度单位,像素 px 是相对于显示器屏幕分辨率而言的。

特点:

IE 无法调整那些使用 px 作为单位的字体大小。
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。

2.em

就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px,那么 1em=14px。如果 font-size 为 18px,那么 1em=18px。

p {
  font-size: 14px;
  line-height: 2em;
}


/*在这里的line-height行高被设置成了14*2=28px*/

3.百分比

p {
  font-size: 14px;
  line-height: 120%;
}
/*行高为:14*1.2=16.8*/

创作不易,大侠请留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)

相关文章
|
3月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
260 8
|
3月前
|
前端开发
css中px和em的区别
css中px和em的区别
61 0
|
3月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
3月前
|
前端开发
CSS——如何使网页字体小于12px
CSS——如何使网页字体小于12px
37 0
|
4月前
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
71 0
|
5月前
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
78 3
|
4月前
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
30 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)