CSS 尺寸单位有哪些?
参考答案:
CSS 提供了多种尺寸单位,用于设置元素的大小、位置和其他样式属性。主要的尺寸单位包括:
1. 绝对单位
px(像素):固定的单位,适用于设备屏幕上的精确像素。csswidth: 100px;cm(厘米):用于印刷样式,1厘米等于约37.8像素。cssmargin: 2cm;mm(毫米):用于印刷样式,1毫米等于约3.78像素。csspadding: 10mm;in(英寸):用于印刷样式,1英寸等于96像素。cssfont-size: 1in;pt(点):印刷样式单位,1点等于1/72英寸,约为1.333像素。cssline-height: 12pt;pc(派卡):印刷样式单位,1派卡等于12点。cssborder-width: 2pc;
2. 相对单位
%(百分比):相对于包含块的尺寸,如父元素的宽度或高度。csswidth: 50%;em:相对于当前元素的字体大小,1em等于当前字体的大小。cssfont-size: 2em;rem:相对于根元素(<html>)的字体大小,1rem等于根元素的字体大小。cssmargin: 1rem;vh(视口高度):相对于视口的高度,1vh等于视口高度的1%。cssheight: 50vh;vw(视口宽度):相对于视口的宽度,1vw等于视口宽度的1%。csswidth: 50vw;vmin:相对于视口的较小的宽度或高度,1vmin是vw和vh中较小的那个。cssfont-size: 2vmin;vmax:相对于视口的较大的宽度或高度,1vmax是vw和vh中较大的那个。cssfont-size: 2vmax;ch:相对于0字符的宽度(当前字体的数字0的宽度)。csswidth: 10ch;ex:相对于当前字体的x高度。cssheight: 5ex;
3. 动态单位
auto:根据元素内容或布局自动计算尺寸。csswidth: auto;min-content、max-content、fit-content:用于定义元素尺寸的最小、最大或适应内容的尺寸。csswidth: min-content;
题目要点:
- 绝对单位:
px,cm,mm,in,pt,pc - 相对单位:
%,em,rem,vh,vw,vmin,vmax,ch,ex - 动态单位:
auto,min-content,max-content,fit-content