css中rem em vh px各自代表的含义

简介: css中rem em vh px各自代表的含义

css中rem em vh px各自代表的含义


rem


rem是css3新增的一个相对单位,rem是相对于HTML根元素的字体大小来进行计算 如果没有设置HTML的字体大小,就会以浏览器默认字体大小,一般是16px。

rem除了IE8及更早版本以外,所有浏览器均支持

20210714214420286.png

20210714214829887.png


em


em子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size。

如果父元素的字体尺寸未设置,则相对于浏览器默认字体大小

20210714215840554.jpg


vw/vh


vw/vh全称是Viewport Width和Viewport Height,视窗的宽度和高度,相当于屏幕宽度和高度的1%,不过,处理宽度的时候%单位更合适,处理高度的话vh单位更好。


px

px像素(Pixel) 。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。一般电脑的分辨率有 {19201024}等不同的分辨率19201024前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素。


相关文章
|
2月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
167 8
|
2月前
|
前端开发
css中px和em的区别
css中px和em的区别
45 0
|
2月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
2月前
|
前端开发
CSS——如何使网页字体小于12px
CSS——如何使网页字体小于12px
16 0
|
前端开发 移动开发 Web App开发
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
3天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
4天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
7天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。