CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS calc（）関数

CSS calc（） 関数を使用すると、長さの値に基本的な数学演算を適用できます。

  • +を追加します
  • 減算-
  • *を乗算します
  • 部門/

たとえば、要素に100％のパーセンテージ幅を使用したいが、同じ要素に合計32pxの幅を予約したいとします。 calc（）を使用してこれを行う方法は次のとおりです ：

div {
	max-width: calc(100% - 32px);
}

これで、その要素は、32pxを引いた、内部にあるコンテナの100％を占めるようになります。

結果：

100％-32px

これは、UIで正確なパーセンテージとピクセル量を同時に操作する必要がある場合に便利です。

コンテナ内の要素を簡単に中央揃えにすることもできます：

div {
	max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

結果：

100％-32px、中央揃え

これで、中央揃えの要素の左右に正確に16pxの間隔ができます。お分かりのように、この calc（）を使用できます 要素間に間隔を追加するときにパディングまたはマージンを使用する代わりに。


  1. CSSの@importAt-rules

    CSS @importルールは、インポートされたスタイルシートのURLの後にメディアタイプを指定することにより、特定のターゲットメディアのスタイル情報を設定するために使用されます。 構文 以下は構文です- @import url（ /*ファイルパス*/）mediatypes {CSS-Code;} CSSの@importルールの例を見てみましょう： HTMLドキュメント 例 @import url（screen.css）screen; @import url（print.css）print; Vivamus commodo、dolor eu porttitor sag

  2. CSSのoutline-colorプロパティ

    アウトラインカラープロパティは、要素の境界線の周りに特定の色の線を描画するように定義できますが、アウトラインは、境界線プロパティとは異なり、要素の寸法の一部ではありません。 構文 CSSのoutline-colorプロパティの構文は次のとおりです- Selector {    outline-color: /*value*/ } 注 −outline-colorを宣言する前にoutline-styleプロパティを定義する必要があります。 例 アウトラインカラーの例を見てみましょう プロパティ- <!DOCTYPE html> <html> &l