CSS3系列 04 常见单位

最新推荐文章于 2024-03-23 08:26:44 发布
最新推荐文章于 2024-03-23 08:26:44 发布
阅读量187 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43422005/article/details/118926142
版权
本文详细介绍了CSS3中的像素单位（px, %, em, rem）及其使用场景，强调了rem作为推荐的响应式设计单位。同时，文章讲解了颜色格式，包括十六进制(#xxxxxx)、单词(word)、RGB(rgb)、RGBA(rgba)以及它们的应用。最后，提到了常见图片格式（jpg/jpeg, png, gif, svg, tiff）的特点和适用场景。" 110633177,9387427,Redis过期键删除策略详解,"['数据库', 'redis', '缓存管理']
摘要由CSDN通过智能技术生成

像素大小

px

px是固定的像素单位，如果你的网页要在多端进行使用那么尽可能的少使用它，它不具有响应式的特性。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:first-of-type{
            font-size: 12px;
        }
        div:last-of-type{
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div>字号设置：12px</div>
    <div>字号设置：18px</div>
</body>

</html>

渲染结果：

image-20210711234104505

%

百分数是子元素相对于父元素设置的大小，比如父元素的大小是18px，那么子元素设置为50%就是9px，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        main{
            font-size: 18px;
        }
        div:first-of-type{
            font-size: 50%;
        }
        div:last-of-type{
            font-size: 200%;
        }
    </style>
</head>

<body>
    <main>
        <p>字号设置：main 18px</p>
        <div>字号设置：50% = 9px</div>
        <div>字号设置：200% = 32px</div>
    </main>
</body>

</html>

渲染结果：

image-20210711234433251

em

em和百分号类似，它也是相较于父元素设置子元素的大小，1em相当于100%，0.5rem相当于50%。

注意，如果是0.x开头的，可直接简写为.x，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        main{
            font-size: 18px;
        }
        div:first-of-type{
            font-size: .5em;
        }
        div:last-of-type{
            font-size: 2em;
        }
    </style>
</head>

<body>
    <main>
        <p>字号设置：main 18px</p>
        <div>字号设置：.5em = 9px</div>
        <div>字号设置：2em = 36px</div>
    </main>
</body>

</html>

渲染结果：

image-20210711235710839

rem

rem是em的升级版，也是推荐使用的方式。所有的大小设置不会按照父元素的值变化而变化，而是统一以html文档的值做参照。

默认的Chorme浏览器的html文档字号大小为16px，如果某个元素设置为.5rem则是8px。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        :root{
            font-size: 16px;
        }
        div:first-of-type{
            font-size: .5rem;
        }
        div:last-of-type{
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <p>字号设置：html 16px</p>
    <div>字号设置：.5em = 8px</div>
    <div>字号设置：2em = 32px</div>
</body>

</html>

渲染结果：

image-20210711235637482

颜色格式

#xxxxxx

#xxxxxx（x为16进制数）中所有的x均相同时，可简写为#xxx。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:first-of-type{
            color: #ddd;
        }
        div:last-of-type{
            color: #ff0000;
        }
    </style>
</head>

<body>
    <div>颜色设置：#ddd</div>
    <div>颜色设置：#FF0000</div>
</body>

</html>

渲染结果：

image-20210712000326516

word

可以直接用单词来设置颜色，如color:red;或者color:blue;等。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:first-of-type{
            color: blue;
        }
        div:last-of-type{
            color: red;
        }
    </style>
</head>

<body>
    <div>颜色设置：blue</div>
    <div>颜色设置：red</div>
</body>

</html>

渲染结果：

image-20210712134513306

rgb(xxx, xxx, xxx)

rgb是三原色，红绿蓝。格式为color:rgb(0~255, 0~255, 0~255)，括号中的数字也可以用单词代替。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:first-of-type {
            color: rgb(0, 0, 255);
        }

        div:last-of-type {
            color: rgb(255, 0, 0);
        }
    </style>
</head>

<body>
    <div>颜色设置：blue</div>
    <div>颜色设置：red</div>
</body>

</html>

渲染结果：

image-20210712134513306

rgba(xxx, xxx, xxx, n)

rgba相较于rgb来说，括号中多了第4位数值n，n的范围为0-1，用于指定透明度。

如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:first-of-type {
            color: rgba(0, 0, 255, .5);
        }

        div:last-of-type {
            color: rgba(255, 0, 0, .8);
        }
    </style>
</head>

<body>
    <div>颜色设置：blue 透明度：50%</div>
    <div>颜色设置：red 透明度：80%</div>
</body>

</html>

渲染结果：

image-20210712134845841

RGB颜色对照表

以下是RGB颜色对照表：

图片格式

常见的图片格式有jpg、jpeg、png、gif、svg、tif、tiff等，它们都有不同的用途，以下是对这些格式的图片简单描述：

  • jpg/jpeg：最适合保存照片或栩栩如生的图像。

    绝大多数计算机和网络用户主要使用 JPEG 文件在线上传、下载或查看图像。保存在 JPEG 中可以压缩照片并使用相当小的文件大小，从而可以更快地下载和上传。这意味着使用 jpeg 可以获得高质量的图像，不会占用大量空间。从网络上传或下载图像时，JPEG 应该是首选的存储文件

  • png：最适合使用透明背景截屏和保存

    PNG 文件主要供图形设计师、使用品牌和徽标的营销人员以及有大量空间在计算机上保存内容的网络用户使用。PNG 通常用于在图像上编辑图像，或在图像上编辑文本。这是因为保存为 PNG 允许将图像或图形放在透明背景上，因此可以创建徽标覆盖。对于线条或文本，PNG 还提供比 jpeg 更“清晰”的图像，因此它们也经常用于屏幕截图。由于 PNG 与 JPEG 文件相比占用了相当多的空间，因此最好避免使用它们，除非您需要透明的背景图像，或者文件大小不是问题

  • svg：最适合保存需要以数字方式放大或缩小的图形

    SVG 文件主要由 Web 设计人员使用，这些设计人员处理的图像和图形将在许多不同大小的媒体上显示和使用。保存在 SVG 中可以实现无缝缩放，或允许图形在不同大小的屏幕上清晰显示（或在屏幕上放大）而不会损失图像质量或“像素化”。徽标通常使用 SVG 文件创建，因为徽标通常显示在视网膜屏幕上，或者需要在不降低质量的情况下放大和缩小

  • gif：最适合保存颜色有限的图像或短动画，或颜色有限的图形

    历史上，GIF 文件主要用于存储颜色有限的图形或图像，不会占用大量存储空间。在当今世界，GIF 主要用作互联网上、消息平台之间来回以及流行文化中的有趣、短循环动画。尽管动画 GIF 占用的存储空间比视频少得多，但它们比 SVG 或 PNG 占用更多的空间。这个存储问题，除了动画循环的一些断断续续的交付（和有限的色谱）之外，还可能使 GIF 动画文件不如 SVG 或 PNG 文件受欢迎

  • tif、tiff：最适合保存将用于打印的图像

    TIFF 文件主要由处理印刷材料的图形设计师使用。在使用数字媒体（网络使用的图像和图形、电子邮件等）时，TIFF 很可能不是您的首选媒体，因为它明显缺乏数字支持。虽然保存在 TIFF 中允许保存图层并在图形或照片中表示许多颜色，但它并不是所有 Web 浏览器或应用程序都支持的文件，并且它不能很好地压缩，因此仅适用于打印用

云崖先生
关注
专栏目录
CSS常见的 9 个单位汇总！
u013179804的博客
04-29 1054
CSS 单位是 CSS（层叠样式表）中用来指定尺寸、长度和其他度量值的一系列标准，使得样式表能够更精确地控制网页的布局和外观。尺寸定义：CSS 单位用于定义网页元素的大小、间距和位置，包括 width 宽度、height 高度、margin 边距、padding 填充、font-size 字体大小等。响应式设计：通过使用视口单位（如vwvh）和相对单位（如emrem），可以创建能够根据用户设备的屏幕尺寸和分辨率自适应的布局。跨浏览器兼容性：合理的单位选择有助于确保网页在不同浏览器和设备上保持一致的显示效果。
CSS系列之过渡 transition（CSS3）
热门推荐
老__L的博客
02-06 1万+
本文主要介绍CSS的transition、transition-delay、transition-duration、transition-property、transition-timing-function属性。过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
CSS 单位解析
徐永赛的博客
09-28 698
CSS 单位解析
css 常见面试题
weixin_44922119的博客
07-27 3431
#box {
CSS背景系列
m0_58035213的博客
09-21 88
css背景相关
【CSS3系列】第七章 · 过渡和动画
麟-小白的博客
06-23 1905
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！【往期回顾】【CSS3系列】第六章 · 2D和3D变换【CSS3系列】第五章 · web 字体【CSS3系列】第四章 · CSS3新增渐变【CSS3系列】第三章 · CSS3新增边框和文本属性。
CSS系列之flex布局
老__L的博客
03-28 2956
本文主要CSS的align-content、align-items、align-self、flex、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、order属性。flex布局
04-CSS基础
小红果果的博客
06-26 435
CSS学习
CSS3的新特性
weixin_45086164的博客
03-23 2139
CSS3的新特性
前端面试题之CSS系列
qq_48701993的博客
07-25 1027
前端面试题之CSS系列
css常见样式声明，基本掌握内容
最新发布
05-02
### CSS常见样式声明详解 #### 一、颜色(color) **颜色**是CSS中最常用的一种属性，用来设置元素内部文字的颜色。颜色可以通过多种方式进行定义： - **预设值**：如`red`, `blue`等，预设的颜色名称较少，但足够...
CSS值、单位和字体说明
09-25
在CSS中，值、单位和字体的设定对于元素的显示至关重要。本文将深入探讨这些概念。 首先，我们来看颜色值。颜色值可以用来指定元素背景或文本的颜色。在CSS中，有多种方法指定颜色：一是使用预定义的颜色名称，如`...
CSS常见语法
09-18
### CSS常见语法详解 #### 字体属性 **font-family**：该属性用于指定网页中使用的字体。当浏览器遇到用户请求的字体无法加载时，会依次向下寻找备用字体，直到找到可以显示的字体。 **font-size**：定义了字体的...
CSS网页布局开发时的常见问题小结
12-11
在CSS网页布局开发中，经常会遇到一系列挑战，这些问题如果不妥善处理，可能会导致页面显示不一致、样式冲突或者兼容性问题。以下是一些关键知识点的详细解释： 1. **验证代码**：在开始调试前，使用W3C的验证工具...
CSS3系列 12 栅格布局
weixin_43422005的博客
07-21 5884
栅格布局 基本介绍 CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。 栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。 对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可。 作为学习者应该从下面两个角度来学习栅格布局： 怎么样画出栅格容器 怎么样将元素放进栅格容器中的某一区域 值得一提的是，现在的一些旧版浏览器对于栅格布局并没有较好的支持性，所以这项技术的应用场景其实相
CSS3系列 14 过渡时间
weixin_43422005的博客
07-21 1289
过渡时间 基础知识 在了解CSS过渡时间之前，你应该先了解一下CSS的变形动画，可以参考之前的一篇博客。 我们的元素在属性发生变化时，如果没有特地的为它设置过渡时间，整个变化过程其实是以毫秒级别进行的，过程非常快，肉眼不易察觉。 故我们要学习CSS过渡时间，来让它的变化过程更加平滑。 动画属性 不是所有css属性都有过渡效果，查看支持动画的CSS属性 ，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。 可以看一下下面这个例子，比如边框的样式就不支持过渡效果，而其他的诸如背景颜色，高度宽度等等都是支持过
CSS3系列 11 弹性布局
weixin_43422005的博客
07-21 1275
弹性布局 基本介绍 弹性布局flex是CSS3新增的一种布局方式，相较于浮动布局，弹性布局在开发效率与维护性上都远胜前者。 flex全称为flexible box，因此也被称之为弹性盒子。 学习弹性布局最主要从2个方面入手： 弹性容器：被设置为display: flex或display: inline-flex的容器元素 弹性元素：弹性容器中包裹的元素 一个大的弹性容器中可以包含多个小的弹性容器，我们可以控制弹性容器中元素的排列方式，也可以为弹性元素进行单独的区域划分以及改变其排列方式，总之而言使用弹性
CSS3系列 16 响应式布局
weixin_43422005的博客
07-21 565
媒体查询 媒体查询是响应式布局中非常常用的一种手段，在学习媒体查询之前要先了解什么是响应式。 所谓响应式即在不同尺寸屏幕设备上响应的内容不同 相信在之前你写的页面在PC端看非常华丽工整，但是一拿到移动端全部乱了套，这就是因为没有对页面做响应式处理。 Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。 媒体类型 选项 说明 all 所有媒体类型 screen 用于电脑屏幕，平板电脑，智能手机等 print 打印设备 speec
CSS3系列 02 元素选择器
weixin_43422005的博客
07-20 408
基本选择器 * 通用选择器 *会选择所有元素，无视层级。常用于做样式清除，如内边距、外边距清除等。 示例如下，将所有的标签元素文本设置为红色： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
CSS知识点全览：单位、选择器与样式引入
"这是一个关于CSS知识点的综合文档，涵盖了CSS中的各种单位、颜色处理、图标设置、样式表引入方式、优先级、选择器、内容属性、背景属性、字体属性、文本属性、列表属性以及表格样式等多个核心概念。" 在CSS中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值