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

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

相关文章
|
2月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
76 0
|
27天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
15 1
|
24天前
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
|
2月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
5天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
5天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
9天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
7天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
13天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
32 5