css中的尺寸
1.Px
- 相对长度单位。像素px是相对于显示器屏幕分辨率而言的
2.em
- 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1
2
3
4
5
6
7<body>body
<div class="div1">div1
<div class="div2">div2
<div class="div3">div3</div>
</div>
</div>
</body
在这个例子中
- body的font-size是继承自跟元素html，html的尺寸是浏览器默认尺寸14px；
- div1的font-size=1.5*14px = 21px;
- div2的font-size=1.5*21px = 31.5px;
- div3的font-size=1.5*31.5px = 47.25px;
3.vh and vw：
相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。
1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
- 设置一个和屏幕同宽的标题，h1{font-size:100vw}，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。
- 实现与同屏幕等高的框
1
2
3.box{
height:100vh;
}
4.vmin and vmax：
关于视口高度和宽度两者的最小值或者最大值。
浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px
- 如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。
chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准
- text-indent设置抬头距离css缩进
- letter-spacing来设置字与字间距_字符间距离，字体间距css样式