CSSのいくつかのTips例を詳しく解説-CSSチュートリアル-php.cn

CSSのいくつかのTips例を詳しく解説

黄舟

リリース： 2017-08-03 15:43:05

オリジナル

1420 人が閲覧しました

1. 要素の margin-top、margin-bottom、padding-top、padding-bottom が単位としてパーセンテージを使用する場合、それは親要素の幅に対して相対的であり、高さに対して相対的です。図に示すように

<style type="text/css">
        .parent{
            outline: 1px solid orange;
            width: 200px;
            height: 300px;
            padding: 10px;
            margin: 10px;
        }
        .child{
            outline: 1px solid purple;
            width: 200px;
            height: 80px;
            padding-top: 10%;    　　/*20px = 父容器的width值200px * 10% */
            padding-bottom: 5%;     /*10px = 200px * 5% */
            margin-top: 20%;    　　/*40px = 200px * 20%*/
            margin-bottom: 15%;    /*30px = 200px * 15%*/
        }<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>

ログイン後にコピー

サブボックスのパラメータは次のとおりです。要素の含まれる位置決め属性はパーセンテージであり、パーセンテージは親要素の相対的な高さです。 left と right は親要素の幅を基準とします。

<span style="color: #000000">.parent{
            outline: 1px solid orange;
            width: 200px;
            height: 300px;
            padding: 0px;
            margin: 0px;
            position: relative;
        }
        .child{
            outline: 1px solid purple;
            width: 200px;
            height: 80px;
            position: absolute;
            top: 5%;　　/* 15px = 300px * 5% 上边框离父盒子上边框15px的距离*/
            left: 20%;　　/*　　40px = 200px * 20% 左边框离父盒子左边框40px的距离　　<br/>　　　　　　　　　　　　　　　　　　 也就是子盒子左上角的坐标为x=15,y=40（父盒子左上角为原点）  */ 
            
        }</span>

ログイン後にコピー

3. 境界線の幅はパーセンテージで表すことはできません

4.width:100%

4.1親コンテナに絶対値がある場合子要素を配置する場合、子要素の設定

width:100% は、実際には親コンテナのパディング+コンテンツを基準とした幅を参照します。

r は図に示すとおりです:

<style type="text/css">
    .parent{
        outline: 1px solid orange;
        width: 200px;
        height: 300px;
        padding: 10px;
        margin: 10px;
        position: relative;
    }
    .child{
        outline: 1px solid purple;
        width: 100%;　　/* width = 220px = 父容器的padding+content*/
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

ログイン後にコピー