CSS でパーセント単位を使用する方法

今回はCSSでパーセント単位を使用する方法と、CSSでパーセント単位を使用する際の注意点について説明します。以下は実際のケースです。

結論:

1. 標準フローの要素については、その属性に継承があるかどうかを確認してください。 width と margin-left の場合は継承可能であり、親要素または祖先要素 (実際には包含ブロック) を参照します。高さの場合は継承がなく、親要素または祖先要素はその高さに適応します。すべての子要素と (これには注意が必要です)。

2. 絶対配置は、最も近い親要素または祖先要素を参照します。親要素または祖先要素がない場合は、最初の包含ブロックを参照します (W3C ではブラウザ固有の方法が指定されていないため、ブラウザによって異なる場合があります)。それを達成します）。しかし実際には、ほとんどのブラウザはビューポートを絶対的に配置された包含ブロックとして扱います。

3. 固定位置は視覚領域を参照します

幅はパーセンテージに設定されます

通常、一般的な子要素は、パーセンテージの参照として親要素の計算値を継承します。およびルート要素は、初期値を参考にしてください

たとえば、.box には幅が設定されていませんが、デフォルトで body の計算された値が継承されます。また、.box は .item の親要素であるため、.item です。 .box の計算値を継承します。ブロックレベルの要素で幅が設定されていない場合、その要素は含まれているブロックの幅を継承するため、その幅はデフォルトで全画面になります。

高さをパーセンテージに設定します

結論

高さをパーセンテージに設定すると、高さは幅のように親要素または祖先要素を継承しません。要素は、子要素の実際の高さ (高さの計算値) に基づいて自動適応されます。通常は、すべての子要素のコンテンツの高さの合計です。子要素は、テキスト行の高さに基づいて特定の高さの値を設定します (子要素の高さが特定の値に設定されていない場合)。絶対配置の要素の場合、その高さがパーセンテージである場合、絶対配置は親要素またはそれに最も近い祖先要素の高さを参照します。祖先要素の場合、それは最初の要素を参照します (W3C ではブラウザが実装する方法を指定していないため、ブラウザによって異なる場合があります)。しかし実際には、ほとんどのブラウザは表示可能領域を絶対的に配置された包含ブロックとして扱います。

通常、幅をパーセンテージで設定することを好みますが、高さをパーセンテージで設定する場合は注意してください。

 <style>
        body,p{
            margin:0;
            padding：0；
        }
        .box{
            width:100px;
            height:100%;
            background-color: #58d3e2;
        }
    </style>
<p class="box">height 100%</p>

HTML では高さが 21 に等しいように見えるのはなぜですか?この21は祖先要素から受け継がれたものなのでしょうか？体の高さを 100% に設定しても、結果は同じです。実際、ここでの高さは行の高さです。つまり、高さが 0 の場合、または高さが設定されていない場合、高さはテキストの行の高さになります。 .box、ボックス、ボディと html の高さは、 .box の高さを特定の値に設定すると 20px になります:

 <style>
        body,p{
            margin:0;
            padding：0；
        }
        .box{
            width:100px;
            height:100px;
            background-color: #58d3e2;
        }
    </style>
<p class="box">height 100%</p>

html は 100px の .box と同じなので、高さを設定しなくても、親要素は子要素の高さに適応すると結論付けることができます (高さを設定しないと、html と body の高さはすべての高さを合わせたものになります)。 content)、親要素が height を設定している場合は、別の状況になります:

 <style>
        body,p{
            margin:0;
            padding:0;
        }
        .d{
            height: 100px;
            width: 200px;
            background-color: #9d9d9d;
        }
        .box{
            width:100px;
            height:100px;
            background-color: #58d3e2;
        }
    </style>
<p class="d">
<p class="box">height</p>
</p>

d、body、および html の高さが 100px (200px であるはずです) になっていることがわかります。これは、親要素がまたは祖先要素が子要素の高さに受動的に適応する場合、その高さの値は要素から継承されません。

絶対配置がある場合

1. 祖先要素を配置せずに絶対配置する

このとき、絶対配置とはビューポートの概念に注意してください。

 <style>
        body,p{
            margin:0;
            padding：0；
        }
        .box{
            position：absolute;
            width:100px;
            height:100%;//改变百分比为50%
            background-color: #58d3e2;
        }
    </style>
<p class="box">height 100%</p>

改变height分别为100%和50%，可以发现html的高度为0，并没有自适应p的高度，因为p已经彻底脱离标准流了，我们说过，如果绝对定位没有定位的祖先元素，则包含块为初始包含块，这里的初始包含块即为可视区，所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度，把滚动条往下拉拉就知道了。

2.绝对定位的元素在另外一个定位元素里面（除static外）

这时百分比参照的是父元素生成的包含块计算出来的值

所以想让定位元素的高度占满整个屏幕，可以：

body{
  position:relative;
}

margin-left设置成百分比

  <style>
        body,p{
            margin:0;
            padding：0；
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: 100%;
            background-color: #58d3e2;
        }
    </style>
<p class="box">margin-left</p>

这时出现了滚动条，这是因为将p的margin-left设置成了100%，而百分比是参照其包含块body的宽度，body又是参照的html（某些浏览器将它当作初始包含块）。而html的初始包含块是可视区，所以可视区的宽度再加上元素的100%，自然就超出了屏幕了。

解决方法：

（1）利用calc函数

<style>
        body,p{
            margin:0;
            padding：0；
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: calc(100%-100px);
            background-color: #58d3e2;
        }
    </style>
<p class="box">margin-left</p>

（2）让body的宽度减去100px,因为p的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的margin-left的100%自然就小了

<style>
        body,p{
            margin:0;
            padding：0；
        }
         body{
             margin-right；100px;
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: 100%;
            background-color: #58d3e2;
        }
    </style>
<p class="box">margin-left</p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端实战项目中20条CSS代码使用注意事项

使用纯CSS3截取字符串

以上がCSS でパーセント単位を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。