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*/

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

相关文章
纯CSS3简洁滑块范围数值输入特效
纯CSS3简洁滑块范围数值输入特效是一款4种滑块拖动输入范围数值,滑块数值ui特效。
73 1
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
776 8
|
前端开发
css中px和em的区别
css中px和em的区别
164 0
|
前端开发
css中px和em的区别
css中px和em的区别
|
前端开发
CSS——如何使网页字体小于12px
CSS——如何使网页字体小于12px
130 0
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
302 3
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
216 0
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
155 0
|
6月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    205
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    207
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    150
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    124
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    257
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    372
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    163
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    103
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    173
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    239