ホームページ > 記事 > ウェブフロントエンド > CSSでのパーセンテージ値の使い方を詳しく解説
CSSでのパーセンテージ値の使い方を詳しく解説
- 高洛峰オリジナル
- 2017-03-09 16:33:262504ブラウズ
CSSでパーセンテージ値の使い方を学ぼう
パーセンテージ値は、CSSでさまざまな要素のサイズやページレイアウトを設計するための基本的な方法です。ここでは、ピクセルへのパーセンテージ変換を含め、CSSでのパーセンテージ値の使い方を徹底的にマスターします。 . メソッドなど、ここで説明します ~
パーセンテージは、親要素の同じ属性のサイズに相対することを目的としています。
フォントの設定に使用した場合、親要素のフォント サイズに相対します。
ほとんどのブラウザの タグと
html {font-size: 100%;}
body {font-size: 100%;}
100% = 1em = 16px = 12pt
幅や高さなどのフォント以外のサイズを設定するために使用される場合、長さの値はパーセントで表されます。同じ属性を持つ親要素の長さの値に基づいて決定されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent {
margin:150px;
width: 200px;
height: 200px;
border: 1px solid blue;
}
p.child {
width: 50%;
height: 50%;
border: 1px dashed black;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>
親要素についてもう少し質問します: 親要素とは何ですか? 相対配置 (relative)、絶対配置 (absolute)、float (浮動小数点)、および固定 (fixed) の中から親要素を見つける方法は何ですか?
HTMLはタグの中にタグが入ったツリー構造になっているため、一般に親子関係が明確です。
<p class="parent">
<p class="child"></p>
</p>
1. 相対的に配置された要素、その親要素はタグの入れ子に準拠します。
2. 絶対配置要素、その親要素は、最も近い配置要素 (絶対配置、相対配置、固定、ただし浮動は含まない) またはウィンドウ サイズ (配置要素が見つからない場合) です。
3. Floating 要素、その親要素もタグのネストに準拠します。
4. 固定要素 (特別な絶対位置)、その親要素はウィンドウ (HTML や本文のサイズではなく、デフォルトでコンテンツを表示するためにブラウザーによって使用される領域のサイズ) です。
絶対位置に注意するだけで、残りは比較的簡単です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
position:absolute;
top:100px;
left:100px;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>
ボックスの幅は窓の半分、缶の幅と高さはボックスの幅と高さの半分です。
can をposition:fixedに設定すると、その親要素はボックスではなくブラウザウィンドウになります。 
缶の幅と高さは、ウィンドウの幅と高さの半分です。
フローティング要素の親要素は、通常の要素の親要素と同じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
float:left;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>
注: パディングとマージンがパーセンテージとして設定されている場合、上、下、左、右は親要素の幅に基づいて計算されます。
pxへのパーセント
例1:マージン
<p style="width: 20px"> <p id="temp1" style="margin-top: 50%">Test top</p> <p id="temp2" style="margin-right: 25%">Test rightright</p> <p id="temp3" style="margin-bottom: 75%">Test bottombottom</p> <p id="temp4" style="margin-left: 100%">Test left</p> </p>
取得されたオフセットは次のとおりです:
temp1.marginTop = 20px * 50% = 10px; temp2.marginRight = 20px * 25% = 5px; temp3.marginBottom = 20px * 75% = 15px; temp4.marginLeft = 20px * 100% = 20px;
次に、パディングの値が関連する要素に基づいていると考えました。この属性は計算されていますが、私が驚いたのは、この属性が適用される親要素の幅に基づいてパディングも計算され、これはマージンと一致することです。 (もう 1 つの文: 要素の幅がパーセンテージで設定される場合、その幅は親コンテナの幅を基準にして計算されます。要素の垂直方向のパーセンテージ設定も、高さではなくコンテナの幅を基準とします。)
ただし、落とし穴が 1 つあります。上記はすべて、配置されていない要素に関するものです。私は興味があり、静的に配置されていない要素の上、右、下、左のパーセンテージ値を計算するにはどうすればよいですか?
例 2: 配置された要素
<p style="height: 100px; width: 50px"> <p id="temp1" style="position: relative; top: 50%">Test top</p> <p id="temp2" style="position: relative; right: 25%">Test rightright</p> <p id="temp3" style="position: relative; bottom: 75%">Test bottombottom</p> <p id="temp4" style="position: relative; left: 100%">Test left</p> </p>
取得されるオフセットは次のとおりです:
temp1.top = 100px * 50% = 50px; temp2.rightright = 100px * 25% = 25px; temp3.bottombottom = 100px * 75% = 75px; temp4.left = 100px * 100% = 100px;
配置された要素の場合、これらの値も親要素に対して相対的ですが、非配置要素とは異なります。親要素を基準にして幅が広いというよりは高いです。
親要素に高さがない場合、代わりにパーセンテージ値が自動として処理されます
少し混乱しますが、覚えておいてください:マージンとパディングの場合、パーセンテージは親要素の幅に従って計算され、配置された要素の場合は、親要素の幅に基づいて計算されます。
以上がCSSでのパーセンテージ値の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。