CSS には多様であると言える長さの単位が多数ありますが、基本的には相対的な長さの単位、絶対的な長さの単位、視覚領域のパーセンテージの長さの単位の 3 つのカテゴリに分類できます。この記事では、相対長さの単位カテゴリにどのような単位が含まれるかを説明し、一般的に使用される相対単位の使用方法を紹介します。困っている友人は参考にしていただければ幸いです。
CSS の相対長さの単位には、em、rem、points、pica、ex、ch などがあります。以下では、相対長さでよく使用される 2 つの単位、em 単位と rem 単位の使用方法を紹介します。 。
css の長さの単位 em 単位
em は相対的なフォントの長さの単位であり、その単位の長さはテキストの垂直方向の長さに基づきます。要素が決まりました。例: 1em は現在のフォント サイズ (font-size 属性) に相当し、2em は現在のフォント サイズの 2 倍に相当します。他の属性 (幅、高さ) に使用される場合、要素自体のフォント サイズに相対します。幅、高さ、行の高さ、マージン、パディング、境界線、その他のスタイルを設定するために使用できます。
それらを理解するために、簡単な例を詳しく見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
font-size: 40px;
width: 10em;
/* 400px */
height: 10em;
border: solid 1px black;
}
p {
font-size: 0.5em;
/* 20px */
width: 10em;
/* 200px */
height: 10em;
border: solid 1px red;
}
span {
font-size: 0.5em;
width: 10em;
height: 10em;
border: solid 1px blue;
display: block;
}
</style>
</head>
<body>
<div>
我是父元素div
<p>
我是子元素p
<span>我是孙元素span</span>
</p>
</div>
</body>
</body>
</html>レンダリング:
em の特性:
em 単位の値は、固定ではありません。子要素のフォント サイズの em は親要素のフォント サイズを基準とします。em を使用する
要素の幅/高さ/パディング/マージンは次のようになります。要素のフォントサイズに対する相対値
css 長さの単位 rem 単位
rem は新しい相対値です。 CSS3 のフォントの長さの単位。これは相対的なものにすぎません。ルート要素、つまり html 要素のフォント サイズは、その長さを決定するために使用されます。これは、モバイル ページにとって不可欠な長さの単位です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
font-size: 16px;
}
.div1 {
font-size: 3rem;
}
.div2 {
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="div1">
div1---48px
<div class="div2">
div2---8px
</div>
</div>
</body>
</body>
</html>レンダリング:
#例では、html のフォント サイズは 16px の固定サイズで、div1 のフォント サイズはは 3rem に設定され、次のようになります。 3rem = 16px * 3 = 48px なので、div1 のフォント サイズは 48 になります。
は、div2 のフォント サイズを 0.5rem に設定し、次のようになります。 0.5rem = 16px * 0.5 = 8px なので、div2 のフォント サイズは 8px になります。
em と rem の比較
簡単な例を通して em と rem の違いを見てみましょう
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
font-size: 16px;
}
body {
font-size: 8px;
}
.div1 {
font-size: 3rem;
/* 3rem = 16px * 3 = 48px */
width: 20em;
/* 20em = 48px * 20 = 960px */
height: 20rem;
/* 10rem = 16px * 20 = 320px */
border: 1px solid red;
}
.div2 {
font-size: 0.5em;
/* 0.5rem = 48px * 0.5 = 24px */
width: 10em;
/* 10em = 48px * 10 = 480px */
height: 10rem;
/* 10rem = 16px * 10 = 160px */
border: 1px solid black;
}
</style>
</head>
<body>
<div>
html设置字体大小为16px,body设置为8px。<br />
div1的字体大小为3rem(3rem = 16px * 3 = 48px)
</div>
<div class="div1">
div1--宽20em(960px),高20rem(320px)
<div class="div2">
div2<br />
宽10em(480px)<br />
高10rem(160px)
</div>
</div>
</body>
</body>
</html>レンダリング:
注:
div1 ボックスのフォント サイズは 3rem です。 Reference ルート要素 html の font-size です。
div1 ボックスの幅は 20em です。これは font-size 属性を持つため、参照テキストは独自の font-size です。
div1 ボックスの高さは 3rem、参照はルート要素 html のフォント サイズです。div2 ボックスのフォント サイズは 0.5em、参照はフォントです。 -親要素 div1 ボックスのサイズ div2 ボックスの高さは 10rem、参照テキストはルート要素 html のフォント サイズです。 div2 の幅。 box は 10em、参照テキストは親要素 div1 box の font-size です。 要約 : 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、CSS 基本ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。
以上がCSSの相対的な長さの単位は何ですか?一般的に使用される相対単位 em と rem の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
REM(全称REMME)是什么币？Feb 21, 2024 pm 05:00 PMREMME是什么币？REMME是一个基于区块链技术的加密货币，致力于提供高度安全且去中心化的网络安全和身份验证解决方案。该项目旨在利用分布式加密技术来增强和简化用户身份验证流程，从而提升安全性和效率。REMME的创新之处在于其借助区块链的不可篡改性和透明性，为用户提供了更可靠的身份验证方式。通过将身份验证信息存储在区块链上，REMME消除了中心化身份验证系统的单点故障，并降低了数据被盗或篡改的风险。这种基于区块链的身份验证方法不仅更安全可靠，而且还能够为用户REMME的背景在当前数字化时代，网络
CSS布局单位的演变与应用：从像素到根据根元素字体大小的相对单位Jan 05, 2024 pm 05:41 PM从px到rem：CSS布局单位的演变与应用引言：在前端开发中，我们经常需要用到CSS来实现页面布局。在过去的几年间，CSS布局单位也经历了演变和发展。最开始我们使用的是像素（px）作为单位来设置元素的大小和位置。然而，随着响应式设计的兴起和移动设备的普及，像素单位逐渐暴露出一些问题。为了解决这些问题，新的单位rem应运而生，并逐渐被广泛应用于CSS布局中。一
CSS 单位属性优化技巧：em，rem，px 和 vw/vhOct 20, 2023 pm 12:54 PMCSS单位属性优化技巧：em，rem，px和vw/vh引言：在网页设计和开发中，CSS单位属性起着非常重要的作用。正确选择和使用合适的单位属性可以使得页面在不同的设备和屏幕尺寸下展示得更加美观和一致。本文将介绍一些常用的CSS单位属性，并提供具体的代码示例来帮助读者更好地掌握这些优化技巧。em单位：em单位是相对于父元素的字体大小来计算的。例如
css中的em是什么单位Dec 07, 2023 pm 02:56 PMCSS中的em是一个相对长度单位，它是相对于元素的字体大小来计算的，1em等于当前元素的字体大小，如果应用在字体大小上，1em将等于父元素的字体大小。
html5中px和em的区别是什么Aug 19, 2022 pm 05:36 PM区别：1、单位长度不同，px是数字化图像长度单位，em是字符宽度的倍数；2、相对对象不同，px是相对于显示器屏幕分辨率而言的，em是相对于当前对象内文本的字体尺寸。3、px的值是固定的，指定是多少就是多少，计算比较容易；em的值不是固定的，并且em会继承父级元素的字体大小。
CSS 单位属性指南：em，rem，px 和 vw/vhOct 25, 2023 am 10:37 AMCSS单位属性指南：em，rem，px和vw/vh在编写CSS样式时，选择合适的单位属性是非常重要的。本文将介绍几种常用的单位属性：em，rem，px和vw/vh，并提供具体的代码示例。emem（字体尺寸单位）是相对于父元素字体尺寸的单位。如果父元素的字体尺寸为16px，1em就等于16px。当em用于其他属性（如宽度、高度等）时，也是相对于父元素
Vue移动端解决1px像素问题的方法Jun 30, 2023 pm 06:21 PMVue开发中如何解决移动端1px像素问题随着移动互联网的快速发展，移动端应用的需求日益增加。然而，移动设备屏幕的尺寸和像素密度的多样性给开发者带来了一定的挑战。其中一个常见的问题是移动端1px像素问题。本文将介绍如何在Vue开发中解决移动端1px像素问题。问题的根源移动端1px像素问题的根源在于移动设备的物理像素和设备独立像素的不匹配。设备独立像素（CSS像
常用的CSS长度单位有哪些？Feb 19, 2024 pm 09:10 PMCSS最常用的长度单位有像素(px)、百分比(%)、另外还有rem、em、vh、vw、pt、cm、mm、in等。这些单位可以用来设置元素的宽度、高度、边框尺寸、字体大小等。像素(px)单位是最常用的单位之一。它是固定的长度单位，相对于电子屏幕的物理像素来计算。以下是一个代码示例：div{width:200px;heigh
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
