css的font-size属性、line-height属性、height属性

这篇具有很好参考价值的文章主要介绍了css的font-size属性、line-height属性、height属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一,字体框

二、font-size属性

三、line-height属性

四、line-height和font-size的联系


        简介:font-size是css中关于字体的样式属性,注意与文本属性text-xxx进行区别。因为文本由一个个字符组成,所以字体属性也会对文本属性造成影响。

一,字体框

      字体框是设计字体时,采用的指定高度,这个高度一旦确定就不会更改。而字体框的宽度会按照比例自行修改。而font-size属性就是指这个字体框的高度。任何字体的基线都是当前字体字母x下端的水平线。 

css的font-size属性、line-height属性、height属性

        而font-size与line-height的关系如下图,下图中蓝色背景色高度就是line-height,当font-size比line-height小的时候,蓝色框会包住字体。实际上,这个蓝色背景是盒模型属性height的值

css的font-size属性、line-height属性、height属性

        由于字体设计的一些特性,导致字体一些约定俗成的协议如下:虽然存在字体框的约束,但是为了字体美观性,超出字体框的现象都存在。比如字母:f、j、g等,但是他们都不可能超过上字体框。

css的font-size属性、line-height属性、height属性

二、font-size属性

        单位px,取值大于0。默认为medium。这个属性会被继承。

语法:
font-size : absolute-size | relative-size | length
参数:
1、absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large
2、relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller
3、length : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。

4、<percentage>

用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

默认值为absolute-size的medium值

三、line-height属性

        取值有固定取值,单位px,如100px。还有相对取值,如数字1.5表示是font-size的1.5倍。默认值为normal。也可以是百分比:150%。另外,line-height的取值不能小于0。

四、line-height和font-size的联系

       很多属性比如css属性如boder、width、height虽然我们没有明确指定,但是他们也是默认存在的,采用的是默认值。比如width、height没有指定时,它由内容自动撑开,自动生成一个盒子。line-height没有指定时,他的取值为normal,即由浏览器自动确定,浏览器会根据内容字体的大小选择合适的line-height取值。

        line-height为手动指定时font-size受影响,但是也可以手动指定line-height,指定之后,line-height的变化不会导致font-size的变化,也不会受到font-size的影响。当line-height比font-size小,则会发生字体重叠的现象,当line-height为0时,此时的盒子height也为0,导致背景色消失。

        此外,height属性受到line-height的影响。

        由于盒模型属性height由line-height属性决定撑开,所以当height=line-height时,则会实现单行文本居中文章来源地址https://www.toymoban.com/news/detail-411432.html

到了这里,关于css的font-size属性、line-height属性、height属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一行代码搞定 font-size 响应式

    公司要做大屏,但是大屏还要有个嵌在系统的版本,屏幕(iframe)小了但字体大了怎么办。网上找了很多代码都很长,个人参考了资料后实现了一个一行代码 font-size 响应式。 在 html 标签中定义是为了定义全局字体基准大小,目前开发几乎所有的字体都用 rem 作为单位,而

    2024年02月03日
    浏览(48)
  • 自定义postcss插件,根据倍率增大font-size大小

    使用侧 定义侧

    2024年02月22日
    浏览(41)
  • 什么是CSS的box-sizing属性?它有哪些取值,各有什么不同?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(46)
  • error: (-215:Assertion failed) size.width>0 && size.height>0 in function ‘cv::imshow‘

    错误:cv2.error: OpenCV(4.7.0) D:aopencv-pythonopencv-pythonopencvmoduleshighguisrcwindow.cpp:971: error: (-215:Assertion failed) size.width0 size.height0 in function \\\'cv::imshow\\\' 我在用cv2读入图片的时候,出现了以上错误,代码如下:    观察到imread函数中读取的图片文件地址在PyCharm中显示不对,由于我的

    2024年02月16日
    浏览(49)
  • opencv error: (-215:Assertion failed) size.width>0 && size.height>0 in function ‘cv::imshow‘

    问题:因为读入图片的宽和高至少有一个不大于0。可以说就是没有读入图片 原因分析:路径出错或没有图片 1.路径里面有中文 ,opencv-python不支持直接读取中文路径,把 图片路径改成英文或把图片换一个路径就行。 如果需要改成中文路径的话可以参考【opencv】实现中文路径

    2024年02月02日
    浏览(56)
  • opencv调用摄像头报错(-215:Assertion failed) size.width>0 && size.height>0 in function ‘cv::imshow‘

    我使用OpenCV调用摄像头时报错: 问题分析如下: error提示断言失败了,因为读入图片的宽和高至少有一样不大于0。 报错代码如下: 改进方案: 运行结果: Nice!顺利运行! 备注: 我在CSDN找到了许多方法,但都未得到解决,最终请教大佬得已解决,与遇到相同问题的诸位分

    2024年02月12日
    浏览(47)
  • 在SVG.js中设置元素大小很简单,调用resize()、size()、width()、height()和attr()的方法

    SVG.js是一款基于JavaScript的强大的图形库,可以创建和操作SVG元素。SVG是可伸缩矢量图形的缩写,即矢量图像,它由矢量图形对象组成,可以无损放大或缩小而不失真。在SVG.js中设置元素大小是非常重要的一部分,因为这样可以使您的图形适应不同屏幕分辨率和大小。本文将探

    2024年02月03日
    浏览(44)
  • CSS | CSS中height:100vh和height:100%的区别

    目录 1、对于设置height:100%;有下面几种情况 2、对于设置height:100vh时有如下的情况 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1% 1、对于设置height:100%;有下面几种情况 (1)当父元素固定高度,子元素设置   height:100%; 时 结果如下

    2024年02月09日
    浏览(36)
  • element-ui设置高度height属性与style属性设置的区别

    在 element-ui 表格中,可以通过 style 属性和 heigh t属性来设置表格的高度。这两种方式的区别如下: 使用 style 属性可以设置表格容器的样式,包括高度、宽度、边框等。例如: 这里将表格容器的高度设置为 300px ,表格的高度是固定的,如果表格内容高度超过了 300px ,不会出

    2024年02月07日
    浏览(48)
  • Unity3d UI上挂载Content Size Fitter组件后用rect获取的UI的width和height

    通常获取UI的宽和高,一般使用GetComponentRectTransform().rect.height或GetComponentRectTransform().rect.width,但是使用Content Size Fitter布局后会获取不到对应的值( 获取为0 ),此时强制刷新一下布局再获取即可。  刷新完再使用 GetComponentRectTransform().rect 获取。 若是 Text 文本,上面的方法可

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包