css相对长度单位有哪些?常用相对单位em和rem介绍

css中的长度单位有很多,可谓五花八门,但基本上可分为三大类:相对长度单位、绝对长度单位和可视区百分比长度单位。本篇文章就给大家说说相对长度单位类中包括了哪些单位,介绍常用的相对单位如何使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

css中相对长度单位包括有:em,rem,points,pica,ex,ch等,下面我们就来介绍一下相对长度中常用的2个单位:em和rem单位是如何使用的。

css长度单位之em单位

em是相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的。例:1em相当于当前的字体尺寸(font-size属性),那么2em相当于当前字体尺寸的2倍。若用于其他属性(width,height),则是相对于本身元素的font-size。可以作用在width、height、line-height、margin、padding、border等样式的设置上。

我们具体的看一个简单的示例,来了解em。

立即学习“前端免费学习笔记(深入)”;

nbsp;html>div {font-size: 40px;width: 10em;/* 400px */height: 10em;border: solid 1px black;}p {font-size: 0.5em;/* 20px */width: 10em;/* 200px */height: 10em;border: solid 1px red;}span {font-size: 0.5em;width: 10em;height: 10em;border: solid 1px blue;display: block;}
我是父元素div

我是子元素p我是孙元素span

登录后复制

以上就是css相对长度单位有哪些?常用相对单位em和rem介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2890312.html

(0)
上一篇 2025年3月10日 22:01:06
下一篇 2025年3月2日 11:58:35

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • px,em,rem的区别

    它们都是用于设置字体的大小以及盒子的宽高,但是px不会因为浏览器尺寸的改变而改变,而em和rem会因为浏览器尺寸的变化而变化 在我们写代码的过程中,经常在CSS中定义字体的大小或者元素的宽高值时会使用到尺寸大小的单位,今天将要为大家详细介绍…

    2025年3月10日 编程技术
    200
  • CSS中单位px、rem、em浅析

    绝对长度 px px是像素值,是一个固定的长度,比如我们的米,厘米一样。 相对长度 为什么我们需要相对长度rem em等? 固定长度已经不能满足我们现在的需求了。 立即学习“前端免费学习笔记(深入)”; 举例:比如我们在缩小我们屏幕的时候,…

    2025年3月10日
    200
  • css中px、em、rem的区别是什么?

    区别:px表示像素,是相对长度单位,是相对于显示器屏幕分辨率来设置字体大小的,不支持IE的缩放;em是相对长度单位,是相对于其父元素来设置字体大小的,支持IE的缩放;rem是相对长度单位,是相对HTML根元素来设置字体大小的。 推荐教程:C…

    2025年3月10日
    200
  • css中rem有什么特点

    css中rem的特点是:使用rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素,例如【.b{font-size: 2rem;   //这里就8px;}】。 本教程操作环境:windows10系统、css3,本文适用于所有品…

    2025年3月10日
    200
  • css 什么是相对长度单位

    在css中,相对长度单位是根据与其他事物的关系来度量的长度单位,是没有固定值的。所度量的实际距离,可能会因为不在其控制之下的其他因素而改变,如屏幕分辨率、可视区域的宽高等等;并且,对于某些相对单位,其大小会因使用该单位的元素的不同而不同。 …

    2025年3月10日
    200
  • css中em什么意思

    em是css中的一个相对长度单位,相对于当前对象内文本的字体尺寸;如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器默认字体尺寸。可以作用在width、height、line-height、margin、border等样式的设置上。 本…

    2025年3月10日
    200
  • css3中的rem怎么用

    rem是一个相对大小的值,相对于html元素字体大小的单位,语法格式为“元素:数字+rem”。rem改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。 本教程操作环境:windows7系统、CSS3&&HTML5…

    2025年3月10日
    200
  • CSS 单位属性优化技巧:em,rem,px 和 vw/vh

    CSS 单位属性优化技巧:em,rem,px 和 vw/vh 引言:在网页设计和开发中,CSS 单位属性起着非常重要的作用。正确选择和使用合适的单位属性可以使得页面在不同的设备和屏幕尺寸下展示得更加美观和一致。本文将介绍一些常用的 CSS …

    2025年3月10日
    200
  • CSS 单位属性指南:em,rem,px 和 vw/vh

    CSS 单位属性指南:em,rem,px 和 vw/vh 在编写CSS样式时,选择合适的单位属性是非常重要的。本文将介绍几种常用的单位属性:em,rem,px 和 vw/vh,并提供具体的代码示例。 emem(字体尺寸单位)是相对于父元素字…

    2025年3月10日
    200
  • CSS布局单位的演变与应用:从像素到根据根元素字体大小的相对单位

    从px到rem:CSS布局单位的演变与应用 引言:在前端开发中,我们经常需要用到CSS来实现页面布局。在过去的几年间,CSS布局单位也经历了演变和发展。最开始我们使用的是像素(px)作为单位来设置元素的大小和位置。然而,随着响应式设计的兴起…

    2025年3月10日
    200

发表回复

登录后才能评论