CSS常用的单位有
emrem百分数pxvwvh
. em
相对长度单位相对当前元素的字体大小相同，「font-size」em会继承父元素字体的大小（基于父元素「相对于父元素的font-size」
. rem（root em）
相对长度单位，基于根元素
. px
长度单位 像素
百分比 %
相对单位，以字体width为例🌰根据当前值属性的「百分比」乘以父元素「width」的具体数值，如果「父元素本身也是百分比%」则需要把父元素的值换算成具体单位的数值才能让子元素继承
「通过实例代码展示em rem 百分数的区别」
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.son {
border: 1px solid red;
color: green;
}
.father {
border: 2px solid blue;
}
/* font-size width height为具体的数字*/
div.father {
font-size: 24px;
width: 200px;
height: 150px;
}
/* 父元素的font-size width height为百分数*/
/* div.father {
font-size: 200%;
width: 50%;
height: 50%;
} */
/*1. em */
div.son {
font-size: 2em;
height: 2em;
width: 2em;
}
/* 2. 百分比 */
/* div.son {
font-size: 200%;
height: 200%;
width: 200%;
} */
/* 3. rem */
/* div.son {
font-size: 2rem;
width: 2rem;
height: 2rem
} */
</style>
</head>
<body>
<div class="father">爸爸
<div class="son">儿子</div>
</div>
</body>
</html>
当父元素的『font-size』『height』『width』具体大小数值为「24px 150px 200px」
相对子元素「div.son」的对应的值单位分别是下面三个值：
- em
div.son {
font-size: 2em;
height: 2em;
width: 2em;
}
font-size 48px
height 96px
width 96px
son-em
根据上面代码和截图所显示的结果可以明显得出1em是基于单前自身字体的大小值，但是当前的「font-size」1em 会继承父元素的字体的大小，而width height则是基于自身字体的大小而非父元素
- 百分数
font-size48px
height300px
width400px
div.son {
font-size: 200%;
height: 200%;
width: 200%;
}
som-%
百分比相对单位，把父元素的值得大小换算成具体数值的px，通过当前的「font-size」「height」「width」的百分数的值，乘以父元素的具体数值的大小，从而de得到单前元素的具体数值
- rem
font-size32px
height32px
width32px
div.son {
font-size: 2rem;
width: 2rem;
height: 2rem
}
som-rem
1rem 基于根元素<html>,因为Chrome浏览器默认font-size为16px 所以，2rem既为32px
当父元素的『font-size』『height』『width』具体值为给定百分数,「200%」「50%」「50%」
父元素百分比
相对子元素「div.son」的对应的值单位分别是下面三个值：
- em
div.son {
font-size: 2em;
height: 2em;
width: 2em;
}
font-size 64px
height 128px
width 128px
当前的父元素的font-size值为32px，子元素的「font-szie」「height」「width」的具体值分别为 64px 128px 128px
，则当父元素的font-size为百分比时，子元素的大小1em,即为父元素的百分比的值换算成具体数值,em仍然是基于自身font-size但是可以继承继承父元素的font-size的大小
父元素百分比 son-em
- 百分数
div.son {
font-size: 200%;
height: 200%;
width: 200%;
}
font-size 64px
父元素百分比 son-%
父元素的百分比font-size换算成具体值大小为32，则子元素的font-size: 200%,及为父元素的2倍，即为64px
- rem
div.son {
font-size: 2rem;
width: 2rem;
height: 2rem
}
font-size 32px
height 32px
width 32px
父元素百分比 son-rem
父元素的百分比font-size换算成具体值大小为32，html文档相对的根元素的fong-size大小为16px,子元素的font-size：2rem，即为根元素的font-size大小的两倍，与当前的父元素的实际大小并无实际关联
. 视窗单位(viewport) vw vh
1vw 1vh 分别为「当前视口」宽度的1/100与「视口高度」的1/100
<div class="test" style="border: 1px solid #000; width: 50vw; height: 50vh;">
</div>
效果
CSS单位vw vh
无单位的数字
数字0
当前值得单位的大小为「零」可以不带单位
- line-height
无单位值，其具体大小为当前font-size的倍数
参考：
版权声明：本文为博主原创文章，未经博主许可不得转载
网友评论