广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS的font-size属性及其em值的使用方法
  • 831
分享到

CSS的font-size属性及其em值的使用方法

2024-04-02 19:04:59 831人浏览 泡泡鱼
摘要

这篇文章主要介绍“CSS的font-size属性及其em值的使用方法”,在日常操作中,相信很多人在CSS的font-size属性及其em值的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方

这篇文章主要介绍“CSS的font-size属性及其em值的使用方法”,在日常操作中,相信很多人在CSS的font-size属性及其em值的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS的font-size属性及其em值的使用方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

定义和用法
font-size 属性可设置字体的尺寸。
说明
该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
可能的值
CSS的font-size属性及其em值的使用方法

实例
设置不同的 html 元素的尺寸:

XML/HTML Code复制内容到剪贴板

  1. h2 {font-size:250%;}   

  2. h3 {font-size:200%;}   

  3. p {font-size:100%}  

关于em值的使用问题
用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就是假设页面没有滚动条,从而会出现滚动条,而通过font-size可以解决这个小BUG,从而提升用户体验。
浏览器一般的默认字体大小是16px,16px=1em,这样换算的话,1px=0.0625,因此如果我们要给字体设置12px的大小,则为0.75em,依次类推要设置的字体大小em值为0.0625*目标px大小值,注意em值会继承父级的字号值。但实际上如果百分比和em配合会更强大,更方便。
浏览器默认的字体大小为16px,这样的话16px=100%,那么1px=6.25%,10px=62.5%,因此如果我们在body里面定义font-size:62.5%,则浏览器默认的字体大小就是10px,上面我们说过em会继承,所以此时10px=1em,所以12px=1.2pm,16px=1.6pm,这样的话是不是在定义字体em单位的大小值就简单多了,但是要注意的是ie下因为解析问题,body在定义字体大小的时候应该为63%。
最后总结,如果需要给页面定义em单位的值,首先在body里面定义font-size:62.5%,为了兼容在ie浏览器下需要写成font-size:63%,然后在设置大小的时候,字体的大小除以10就是em值。

到此,关于“CSS的font-size属性及其em值的使用方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: CSS的font-size属性及其em值的使用方法

本文链接: https://www.lsjlt.com/news/76758.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS的font-size属性及其em值的使用方法
    这篇文章主要介绍“CSS的font-size属性及其em值的使用方法”,在日常操作中,相信很多人在CSS的font-size属性及其em值的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • CSS中的font-size属性的用法介绍
    这篇文章主要讲解了“CSS中的font-size属性的用法介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中的font-size属性的用法介绍”吧!...
    99+
    2022-10-19
  • CSS 字体属性选择指南:font-family 和 font-size 的正确使用
    引言:在网页设计中,字体选择是一个重要的方面。一个合适的字体能够增强网页的可读性和美感。在 CSS 中,我们可以通过 font-family 和 font-size 属性来控制字体样式和大小。然而,正确地使用这两个属性是一个有挑战的任务。本...
    99+
    2023-10-21
    字体属性 (font) 字体家族 (font-family) 字号 (font-size)
  • css如何使用font-size属性设置文本的大小
    这篇文章给大家分享的是有关css如何使用font-size属性设置文本的大小的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 font-size 属性配置文本的大小。 有本事规...
    99+
    2022-10-19
  • 如何使用CSS的font-size-adjust属性改善网页排版
    这篇文章主要为大家展示了“如何使用CSS的font-size-adjust属性改善网页排版”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS的font...
    99+
    2022-10-19
  • CSS3属性background-size的使用方法
    这篇文章主要讲解了“CSS3属性background-size的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3属性background-si...
    99+
    2022-10-19
  • CSS中overflow-wrap新属性值anywhere的使用方法
    这篇文章主要介绍了CSS中overflow-wrap新属性值anywhere的使用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、先了解下overflow-w...
    99+
    2023-06-08
  • CSS的animation属性使用方法
    这篇文章主要介绍“CSS的animation属性使用方法”,在日常操作中,相信很多人在CSS的animation属性使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CS...
    99+
    2022-10-19
  • DataURIscheme及其在CSS中的使用方法
    本篇文章为大家展示了DataURIscheme及其在CSS中的使用方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。网页优化的一大首要任务是减少HTTP 请求 (h...
    99+
    2022-10-19
  • CSS中position属性的使用方法
    本篇内容主要讲解“CSS中position属性的使用方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中position属性的使用方法”吧!positio...
    99+
    2022-10-19
  • css中clear属性的使用方法
    本篇内容主要讲解“css中clear属性的使用方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css中clear属性的使用方法”吧!定义和用法clear 属性...
    99+
    2022-10-19
  • css line-height属性的使用方法
    这篇文章主要介绍“css line-height属性的使用方法”,在日常操作中,相信很多人在css line-height属性的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • vuex的几个属性及其使用传参方式
    目录vuex概念1.1、组件之间共享数据的方式1.2、Vuex是什么1.3、使用Vuex同意管理状态的好处vuex的基本使用vuex的核心概念StateMutation第一种方式第二...
    99+
    2023-01-28
    vuex几个属性使用传参 vuex使用传参 vuex的几个属性
  • CSS list-style-type属性的使用方法
    本篇内容介绍了“CSS list-style-type属性的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2022-10-19
  • CSS中的字体属性的使用方法
    这篇文章主要讲解了“CSS中的字体属性的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中的字体属性的使用方法”吧! 字体族 font...
    99+
    2022-10-19
  • CSS中的文本属性的使用方法
    CSS中的文本属性的使用方法,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。文本缩进 text-indent值:长度值(正、负均可)示例:p...
    99+
    2022-10-19
  • DIV+CSS中min-height属性的使用方法
    这篇文章主要讲解了“DIV+CSS中min-height属性的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV+CSS中min-height属性...
    99+
    2022-10-19
  • CSS中的Box Model盒属性的使用方法
    本篇内容介绍了“CSS中的Box Model盒属性的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • shell脚本返回值及其使用场景的实现方法
    小编给大家分享一下shell脚本返回值及其使用场景的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!应用场景在一些应用中(比如Jenkins),嵌入了she...
    99+
    2023-06-09
  • 掌握CSS中的固定定位属性的使用方法
    如何使用CSS中的固定定位属性?CSS中的固定定位属性(position: fixed)是一种常用的布局技术,可以将元素固定在浏览器窗口的特定位置,不随页面滚动而变动。这个属性在开发各种网页和应用程序时非常有用。本文将介绍固定定位属性的使用...
    99+
    2023-12-28
    CSS 定位 固定定位
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作