CSS尺寸设置单位?

一、css中常用单位有哪些?

共有6个单位,分别是px,em,rem,vw,vh,pt。

① 除了px是绝对单位,其余都是相对单位。

② em相对于他本身的字体大小(但他本身字体大小是相对于父级字体大小的)。

③ rem相对于根元素的字体大小。

④ vw相对于可视化窗口的宽(1vw就是1%窗口宽度)。

⑤ vh相对于可视化窗口的高(1vh就是1%窗口高度)。

⑥ pt:点,是印刷行业中常用的单位。1pt 约等于 1/72 英寸。

二、px、em、rem都是用来表示长度单位的,但它们之间有一些区别:

  1. px:像素(Pixel),是一个相对固定的单位,指屏幕上的一个点。在网页设计中,通常使用px作为长度单位,因为它的大小是固定的,不会随着浏览器的缩放而改变。

    应用场景:适用于固定大小的元素,例如字体大小,边框、图片宽高、容器等。由于它的大小是固定的,不会随着浏览器缩放而改变,因此可以保证设计的准确性。

  2. em:em是相对单位,它是相对于当前元素的字体大小来计算的,因此可以根据父元素的字体大小来自动调整大小,使得网页在不同设备上显示更加一致。例如,如果一个段落的字体大小是16px,那么1em就等于16px。如果一个子元素的字体大小是0.5em,那么它的大小就是父元素字体大小的一半。em的缺点是,如果嵌套层级很深,就会导致计算变得复杂。

    应用场景:适用于相对大小的元素,例如文本、行高、内边距等。

  3. rem:rem也是相对单位,但是它是相对于根元素的字体大小来计算的,因此可以根据根元素的字体大小来自动调整大小,使得网页在不同设备上显示更加一致。在网页设计中,通常将根元素的字体大小设置为16px,这样1rem就等于16px。与em相比,rem的优势在于它不会受到嵌套层级的影响,因此计算更加简单。

    应用场景:适用于相对响应式布局用到的较多些,因为它的计算不会随着嵌套而改变。大小的元素,例如容器、布局等。同时,rem还可以用于设置媒体查询的断点,从而实现响应式设计。

总的来说,px适合用于固定大小的元素,而em和rem适合用于相对大小的元素。在实际应用中,需要根据具体情况选择合适的单位。

三、补充PT和PC

在CSS中,PT和PC是指不同的长度单位。

  1. PT(Point):PT是一种相对单位,表示打印机上的点数。在CSS中,1pt等于1/72英寸,因此它在屏幕上的实际大小会随着显示设备的分辨率而有所变化。PT通常用于Web设计中制定打印样式或确定文本尺寸时使用,适用于打印输出。

  2. PC(Pica):PC也是一种相对单位,它是PT的大单位。1PC等于12点(即1/6英寸),因此1PC等于16PT。PC单位在网页设计中很少使用,更多地用于印刷行业。

需要注意的是,PT和PC都是相对单位,它们的具体显示大小会受到用户设备的分辨率、浏览器设置以及字体样式等因素的影响。为了确保在不同设备上的一致性,更常用的是使用像素(px)作为CSS的长度单位,因为像素是屏幕上的最小可见单位,具有固定的显示大小。


注意:编写CSS样式时,建议使用相对单位(如em、rem、%)或像素(px),以便在不同设备上获得一致的显示效果。

相关推荐
四喜花露水几秒前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy10 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie40 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js