我是靠谱客的博主 美满黑夜,最近开发中收集的这篇文章主要介绍34、CSS进阶——行高的取值以及常见的长度单位行高的取值以及常见的尺寸单位,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

行高的取值以及常见的尺寸单位

1. 行高的取值

line-height

  1. px像素值,固定单位。

  2. 无单位的数字,相对单位。行高为字体大小的x倍。

先继承再计算。子元素继承后,行高为子元素自身字体大小的x倍。

  1. em单位,相对单位。行高为字体大小的x倍。

浏览器的基准字号为16px。
em的计算过程是,先计算再继承。这样就不够灵活,例如父元素的行高设为2em,则其行高就固定为32px,子元素继承的行高也为32px。

  1. 百分比,相对单位。

效果同em。先计算再继承。

2. 关于尺寸单位

  • 像素px是相对于显示器屏幕分辨率而言的;
  • em是相对长度单位。相对于当前对象内文本的字体尺寸(参考物是父元素的font-size);
  • rem是CSS3新增的一个相对单位,rem是相对于HTML根元素的字体大小(font-size)来计算的长度单位;
  • vwvhvmaxvmin这四个单位都是基于视口
    • vw是相对视口(viewport)的宽度而定的,长度等于视口宽度的1/100;
    • vh是相对视口(viewport)的高度而定的,长度等于视口高度的1/100;
    • vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
  • vm同vmin,CSS3新增单位。

最后

以上就是美满黑夜为你收集整理的34、CSS进阶——行高的取值以及常见的长度单位行高的取值以及常见的尺寸单位的全部内容,希望文章能够帮你解决34、CSS进阶——行高的取值以及常见的长度单位行高的取值以及常见的尺寸单位所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(43)

评论列表共有 0 条评论

立即
投稿
返回
顶部