CSSの「計算プロパティ」とは何ですか

まず第一に、この記事で説明する計算プロパティは、vue の計算プロパティとは何の関係もありません。

(推奨チュートリアル: CSS チュートリアル)

誰もが開発中にこのような問題に遭遇したことがあると思います:

私はスタイルをデザインし、主にパーセント レイアウトを使用しています。このように、解像度の違いで特に大きなズレは生じませんが、pxなどの固定単位を適用しないことは避けられないため、親要素を2つに分割した場合、先頭はピクセルpxを使用しますが、下部はピクセルpxを使用する必要がありますすべてのサイズを残すにはどうすればよいですか？ Flexbox は確かにそれを解決できますが、本当にもっと良い方法はないのでしょうか?

別の例として、要素を移動する必要がある場合、要素を中央に配置する必要がありますが、親要素が相対的に配置されていない場合、要素を配置して中央に配置することはできません。 50%も半分の幅に見えるので、ずれを元に戻さないといけないので面倒です。

計算されたプロパティは次のとおりです:

calc(percent - Pixel)

例 1:

// 父元素
.box{
    width:100%;
    height:100;
}
// 子元素左边
.boxLeft{
    width:50px;
    height:100%;
}
// 子元素右边
.boxRight{
    width:calc(100% - 50px);
    height:100;
}

例 2:

// 需要居中的盒子
.box{
    width:500px;
    height:400px;
    margin-left:calc(50% - 250px);
    margin-top:calc(50% - 200px);
}

以上がCSSの「計算プロパティ」とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。