1.CSS单位总结

CSS 单位总结

经典真题

  • pxem 的区别

CSS 中的哪些单位

首先,在 CSS 中,单位分为两大类,绝对长度单位相对长度单位

绝对长度单位

我们先来说这个,绝对长度单位最好理解,和我们现实生活中是一样的。在我们现实生活中,常见的长度单位有米(m)、厘米(cm)、毫米(mm),每一种单位的长度都是固定,比如 5cm,你走到任何地方 5cm 的长度都是一致的

例如:

<div class="container"></div>
.container{width: 5cm;height: 5cm;background-color: pink;
}

在上面的代码中,我们设置了盒子的宽高都是 5cm,这里用的就是绝对长度单位。

常见的绝对单位长度如下:

image-20210914153818508

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如,我们通常不会在屏幕上使用 cm

惟一一个经常使用的值,估计就是 px(像素)。

相对长度单位

相对长度单位相对于其他一些东西,比如父元素的字体大小,或者视图端口的大小。使用相对单位的好处是,经过一些仔细的规划,我们可以使文本或其他元素的大小与页面上的其他内容相对应。

下表列出了 web 开发中一些最有用的单位。

image-20240222084129887

上面的单位中,常用的有 em、rem、vw、vh,其中 vwvh 代表的是视口的宽度和高度,例如:

<div class="container"></div>
*{margin: 0;padding: 0;
}
.container {width: 50vw;height: 100vh;background-color: pink;
}

在上面的代码中,我们设置了容器的宽度为 50vw,也就是占视口的一半,而高度我们设置的是 100vh,就是占满整个视图。

接下来来看一下 emrem

emrem 相对于 px 更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于 emrem 的区别一句话概括:em 相对于父元素,rem 相对于根元素。

来看关于 emrem 示例。

em 示例

<div>我是父元素div<p>我是子元素p<span>我是孙元素span</span></p>
</div>
* {margin: 0;padding: 0;
}div {font-size: 40px;width: 10em;/* 400px */height: 10em;outline: solid 1px black;margin: 10px;
}p {font-size: 0.5em;/* 20px */width: 10em;/* 200px */height: 10em;outline: solid 1px red;
}span {font-size: 0.5em;width: 10em;height: 10em;outline: solid 1px blue;display: block;
}

效果:

image-20240222084157243

rem 示例

rem 是全部的长度都相对于根元素,根元素是谁?

那就是 html元素。通常做法是给 html 元素设置一个字体大小,然后其他元素的长度单位就为 rem

例如:

<div>我是父元素div<p>我是子元素p<span>我是孙元素span</span></p>
</div>
* {margin: 0;padding: 0;
}html {font-size: 10px;
}div {font-size: 4rem;/* 40px */width: 30rem;/* 300px */height: 30rem;/* 300px */outline: solid 1px black;margin: 10px;
}p {font-size: 2rem;/* 20px */width: 15rem;/* 150px */height: 15rem;/* 150px */outline: solid 1px red;
}span {font-size: 1.5rem;width: 10rem;height: 10rem;outline: solid 1px blue;display: block;
}

所以当用 rem 做响应式时,直接在媒体中改变 htmlfont-size,此时用 rem 作为单位的元素的大小都会相应改变,很方便。

看到这里我想大家都能够更深刻的体会了 emrem 的区别了,其实就是参照物不同。

真题解答

  • pxem 的区别

参考答案:

pxpixel 像素,是相对于屏幕分辨率而言的,是一个绝对单位,但是具有一定的相对性。因为在同一设备上每个设备像素所代表的物理长度是固定不变的(绝对性),但在不同设备间每个设备像素所代表的物理长度是可以变化的(相对性)。

em 是相对长度单位,具体的大小要相对于父元素来计算,例如父元素的字体大小为 40px,那么子元素 1em 就代表字体大小和父元素一样为 40px0.5em 就代表字体大小为父元素的一半即 20px

-EOF-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows sever Event 70117000事件日志

背景&#xff1a;Windows server2008 频繁蓝屏&#xff0c;日志报错信息时间ID&#xff1a;7011&7000&#xff0c;Service Control Manager 原因&#xff1a;Service Control Manager transmits control requests to running services and driver services. It also maint…

mysql-MVCC

一、基础概念 1. MVCC的含义 MVCC (Multiversion Concurrency Control)&#xff0c;即多版本并发控制技术&#xff0c;它是通过读取某个时间点的快照数据&#xff0c; 来降低并发事务冲突而引起的锁等待&#xff0c; 从而提高并发性能的一种机制. MVCC 的实现,是通过保存数据…

汽车常识网:电脑主机如何算功率的计算方法?

今天汽车知识网就给大家讲解一下如何计算一台主机的功率。 它还会解释如何计算计算机主机所需的功率&#xff1f; &#xff1f; &#xff08;如何计算电脑主机所需的功率&#xff09;进行说明。 如果它恰好解决了您现在面临的问题&#xff0c;请不要忘记关注本站。 让我们现在就…

勒索组织再次盯紧制造业!亚信安全发布《勒索家族和勒索事件监控报告》

本周态势快速感知 本周全球共监测到勒索事件104起&#xff0c;事件数量有所下降。 lockbit3.0仍然是影响最严重的勒索家族&#xff1b;hunters和play也是两个活动频繁的恶意家族&#xff0c;需要注意防范。 本周8base勒索组织窃取安索杰国际贸易公司大量文件&#xff0c;包括…

谷歌掀桌子!开源Gemma:可商用,性能超过Llama 2!

2月22日&#xff0c;谷歌在官网宣布&#xff0c;开源大语言模型Gemma。 Gemma与谷歌最新发布的Gemini 使用了同一架构&#xff0c;有20亿、70亿两种参数&#xff0c;每种参数都有预训练和指令调优两个版本。 根据谷歌公布的测试显示&#xff0c;在MMLU、BBH、GSM8K等主流测试…

解密C语言选择结构:掌握条件语句与分支逻辑的利器

引言 C语⾔是结构化的程序设计语⾔&#xff0c;这⾥的结构指的是顺序结构、选择结构、循环结构。为什么有着三种结构呢&#xff0c;大家其实可以想象一下&#xff0c;生活中的绝大数事情都可以抽象着三种结构&#xff0c;而我们今天要给大家介绍的就是三大结构之一——选择结构…

Jenkins 中部署Nodejs插件并使用,并构建前端项目(3)

遇到多个版本nodeJS需要构建的时候 1、第一种就是一个配置安装&#xff0c;然后进行选中配置 2、第二种就是插件&#xff1a;nvm-wrapper&#xff0c;我们还是选用NodeJS插件&#xff1a; &#xff08;1&#xff09;可以加载任意npmrc文件&#xff1b; &#xff08;2&#x…

鸿蒙NEXT出现有前途吗?是否会和安卓、IOS开发历程一样?

只要有手机操作系统这玩意存在&#xff0c;一定是需要原生开发人员的&#xff0c;但随着独立操作系统越来越多的话&#xff0c;混合App开发可能是个“万能解决方案”。 2024年&#xff0c;在中国&#xff0c;被各大媒体和开发者称为“鸿蒙元年”。 在2023年底就有业内人士透露…

【es6】Map 和 Object 对象的区别

对象 Object Object 是一个特殊的对象&#xff0c;它本身是一个顶级对象&#xff0c;同时还是一个构造函数&#xff0c;还可以使用字面量的方式声明一个对象本质上是键值对的集合&#xff0c;但是健只能是字符串 或 Symbol使用 . [] 去获取object 的属性&#xff0c;不存在则…

jenkins编译使用nohup部署进程到后台失败,解决方法

在shell脚本中加入BUILD_IDdontKillMe server为二进制文件 #!/bin/bashBUILD_IDdontKillMenohup ./server & 原理&#xff1a;jenkins默认会在构建完成后杀掉构建过程中shell命令触发的衍生进程。jenkins根据BUILD_ID识别某个进程是否为构建过程的衍生进程&#xff0c;故…

常见锁策略,CAS,synchrodized原理讲解

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 常见锁策略 乐观锁和悲观锁 轻量级锁和重量级锁 自旋锁和挂起等待锁 读写锁 公平锁和非公平锁…

基于Java+SpringBoot+Vue.js前后端分离玩具购物商城系统设计和实现 可行性分析

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

已解决java.lang.NullPointerException异常的正确解决方法,亲测有效!!!

已解决 java.lang.NullPointerException 异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 总结 Q1 - 问题分析 在Java编程中&#xff0c;NullPointerException 可能是最常见的运行时异常之一。这种异…

基于Java在线考试网站系统 设计与实现(Springboot框架)毕业设计论文提纲参考

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

264.【华为OD机试真题】最长子字符串的长度(二)(动态规划DP-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-最长子字符串的长度(二)二.解题思路三.题解代码…

Transformer 架构—Encoder-Decoder

文章目录 前言 一、Encoder 家族 1. BERT 2. DistilBERT 3. RoBERTa 4. XML 5. XML-RoBERTa 6. ALBERT 7. ELECTRA 8. DeBERTa 二、Decoder 家族 1. GPT 2. GPT-2 3. CTRL 4. GPT-3 5. GPT-Neo / GPT-J-6B 三、Encoder-Decoder 家族 1. T5 2. BART 3. M2M-100 4. BigBird 前言 …

每日五道java面试题之spring篇(三)

目录&#xff1a; 第一题 ApplicationContext和BeanFactory有什么区别&#xff1f;第二题 Spring中的事务是如何实现的&#xff1f;第三题 Spring中什么时候Transactional会失效&#xff1f;第四题 Spring容器启动流程是怎样的&#xff1f;第五题 Spring Boot、Spring MVC 和 S…

Sip网络广播号角,sip广播系统公共广播系统有源喇叭

Sip网络广播号角&#xff0c;sip广播系统公共广播系统有源喇叭 SV-7044VP网络有源喇叭&#xff0c;具有10/100M以太网接口&#xff0c;内置高品质扬声器&#xff0c;通过自带放大器播放网络音频&#xff0c;扬声器输出功率高达30W&#xff0c;还支持设置最多10个组播优先区域&…

js如何抛异常,抛自定义的异常

js如何抛异常,抛自定义的异常 最简单的自定义异常 throw "hello" 来自chrome123的控制台的测试 throw "hello" VM209:1 Uncaught hello &#xff08;匿名&#xff09; VM209:1 try{ throw "hello";}catch(e){console.log(e);} VM338:1 hello…

nuxt项目搭建

1.先下载nuxt脚手架 yarn create nuxt-app <项目名>&#xff0c;记得安装完项目&#xff0c;npm i,下载node包 目录介绍 components 存放组件分别是头部&#xff08;包含导航&#xff09;和底部 layouts 页面布局&#xff0c;实现一个页面整体架构规则&#xff0c;头…