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),以便在不同设备上获得一致的显示效果。

相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5