您的位置：首页 > Web前端 > CSS

css单位

2016-03-08 13:38 766 查看

0. px : 绝对单位，页面按精确像素展示

1. em ：相对于父级的倍数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Unit</title>
</head>
<style>
body{
font-size: 10px;
}
.unit-01{font-size: 1.2em;}
.unit-01-1{font-size: 1.2em;}
</style>
<body>

<!-- 相对于父级的 1.2倍 -->
<div class="unit-01">
<!-- 12px = 10px * 1.2 -->
cynthia娆墨旧染
<div class="unit-01-1">
<!-- 14.4px = 12px * 1.2-->
cynthia娆墨旧染
</div>
</div>

</body>
</html>

2. rem ：相对于根root的倍数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem</title>
</head>
<style>
body{
font-size: 10px;
}
.unit-1{
font-size: 1.2rem;
}
.unit-1-1{
font-size: 1.2rem;
}
.unit-2{
font-size: 1.8rem;
}
</style>
<body>
<div class="unit-1">
<!-- 12px -->
cynthia娆墨旧染
<div class="unit-1-1">
<!-- 12px -->
cynthia娆墨旧染
</div>
</div>
<div class="unit-2">
<!-- 18px -->
cynthia娆墨旧染
</div>
</body>
</html>

3. vw : viewpoint width 视窗宽度。1vw = 视窗宽度的1%

vh : viewpoint height 视窗宽度。1vh = 视窗高度的1%

vmin : vw 和 vh 中较小的那个

vman : vw 和 vh 中较大的那个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
.unit-1{
height:50vmin;
width:50vmin;
background: red;
float: left;
}
.unit-2{
height:50vmin;
width:50vmin;
background: blue;
float: left;
}
</style>
<body>
<div class="unit-1">
<!-- 较小的是宽 所以是宽的50% -->
</div>
<div class="unit-2">
<!-- 50% -->
</div>
</body>
</html>

4. %

5. pt : point 大约1/72寸

6. pc : pica 大约6pt 1/6寸

7. ex : 相当于0.5的1em

　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
font-size: 24px;
}
.unit-1{
font-size: 1ex;
}
</style>
<body>
<div class="unit-1">
<!-- 12px -->
cynthia娆墨旧染
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航