css的度量单位：px、em、rem、vh、vw、vmin、vmax、百分比

css的度量单位

  • px，像素数量，适用于比较固定的场景，比如边框宽度，分割线宽度

  • em

    em：是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；它相对的是父元素的字体大小，如果父元素是根的1.5，当前元素是父元素1.5，则当前元素字体大小是16 * 1.5 *1.5 = 36px

    		<!DOCTYPE html>
    		<html>
    		<head>
    		<meta charset="utf-8">
    		<title>文档标题</title>
    		  <style>
    		    .outer{
    		      font-size:1.5em;
    		    }
    		    .inner{
    		      font-size:1.5em;
    		    }
    		  </style>
    		</head>
    		<body>
    		  <span>这是body根的内容</span>
    			<div class="outer">
    		      <span>这是外层内容</span>
    		      <div class="inner">
    		      <span>这是内层内容</span>
    		      </div>
    		  </div>
    		</body>
    		</html>

image

  • rem

    em 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

    		<!DOCTYPE html>
    		<html>
    		<head>
    		<meta charset="utf-8">
    		<title>文档标题</title>
    		  <style>
    		    .outer{
    		      font-size:1.5em;
    		    }
    		    .middle{
    		      font-size:1.5em;
    		    }
    		    .inner{
    		      font-size:1.5rem;
    		    }
    		  </style>
    		</head>
    		<body>
    		  <span>这是body根的内容</span>
    			<div class="outer">
    		      <span>这是外层内容 1.5em</span>
    		      <div class="middle">
    		      		<span>这是中层内容 1.5em</span>
    		          <div class="inner">
    		                <span>这是内层内容 1.5rem</span>
    		          </div>
    		      </div>
    		  </div>
    		</body>
    		</html>

    image

  • vh/vw

    这个似乎是相对于viewport的东西，这个viewport应该是

    这里的viewport

    1vh相当于1%的viewport高度，1vw相当于1%的viewport宽度

  • %(百分比)

    % 是相对于父元素的

    		<!DOCTYPE html>
    		<html>
    		<head>
    		<meta charset="utf-8">
    		<title>文档标题</title>
    		  <style>
    		    .outer{
    		      display: flex;
    		      justify-content: center;
    		      align-items: center;
    		      
    		      width: 500px;
    		      height: 330px;
    		      background-color: #F1A0E1;
    		    }
    		    .inner{
    		      width: 80%;
    		      height: 80%;
    		      background-color: #77A0E1
    		    }
    		  </style>
    		</head>
    		<body>
    		  <div class="outer">
    		    <div class="inner" />
    		  </div>
    		</body>
    		</html>

    image

  • vmin

    vw和vh中较小的那个。

  • vmax

    vw和vh中较大的那个。

建议

  1. 如果是div长宽尽可能使用百分比，em，或者rem，方便适配，而且不同放缩比例下，页面尽可能不乱
  2. 如果是border或者其他的样式使用px
    最终还是 根据实际需要来处理

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/17361523.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   echo_lovely  阅读(305)  评论(0)  编辑  收藏  举报
相关博文：
· css 各种居中
· 绝对定位和相对定位以及伪元素
· css3各种度量单位 px、em、%、rem、vh/vw、vmin/vmax
· CSS尺寸设置的单位：px、rem、em、vw、vh
· CSS的单位
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛