标签:em px width 1% rem font css size
css单位
css单位分为相对和绝对
绝对单位包括:px
相对单位包括:
单位 | 相对于 |
---|---|
em | 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width |
ex | 字符“x”的高度 |
ch | 数字“0”的宽度 |
rem | 根元素(html)的字体大小 |
lh | 元素的 line-height |
vw | 视窗宽度的 1% |
vh | 视窗高度的 1% |
vmin | 视窗较小尺寸的 1% |
vmax | 视图大尺寸的 1% |
例子:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<style>
.em {
font-size: 16px;
width: 10em;
border: 1px solid red;
}
.em1 {
font-size: 1.2em;
width: 10em;
border: 1px solid red;
}
.wrap {
font-size: 20px;
}
html {
font-size: 20px;
}
.rem {
font-size: 1.5rem;
width: 10rem;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="em">我是em单位 width=16*10</div>
<div class="wrap">
<div class="em1">我的font-szie em font-size =1.2*20=24 width=24*10</div>
</div>
<div class="rem">我是rem单位 font-szie= 20*1.5 =30 width=20*10</div>
<script></script>
</body>
</html>
标签:em,px,width,1%,rem,font,css,size 来源: https://www.cnblogs.com/heihei-haha/p/14918169.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。