CSS3 の calc() プロパティを使用して計算でサイズ値を表現する方法の説明-CSSチュートリアル-php.cn

CSS3 の calc() プロパティを使用して計算でサイズ値を表現する方法の説明

高洛峰

リリース： 2017-03-09 16:47:01

オリジナル

1970 人が閲覧しました

この記事では、CSS3 で calc() 属性を使用して数式でサイズ値を表現する方法について説明します

calc() の使用法は非常に巧妙です。次のようにして長さ、幅、その他の値を計算できます。学校の算数の問題と同じように数式を組み立ててアダプティブレイアウトをある程度実現するために、CSS3のcalc()属性を使ってサイズ値を算術式で表現する方法を紹介します

アダプティブレイアウトを実装したいとき。ページのレイアウトでは、通常はマージンが存在するため面倒です。幅に適応する入力ボックスを実装したい場合、同時にパディングやマージンが存在するため、非常に面倒です。ブラウザの互換性により、効果に一貫性がありません。 CSS3 に追加された新しい属性 box-sizing は、上記の問題をある程度解決します。今日の記事では、CSS3 の別の新しく追加された属性 calc() を使用してアダプティブレイアウトを実装します。

calc() は CSS3 の新しく追加された属性で、算術式を使用して長さの値を表現できるようになります。つまり、これを使用して p の幅を定義し、マージン、パディング、ボーダーなどを設定できます。
calc() の操作ルール:
1. 四則演算「+」、「-」、「*」、「/」を使用します。
2. パーセント、ピクセル、エム、レムなどの単位を使用できます。 .;
3. 計算にはさまざまな単位を使用できます。

使い方
calc() 構文は非常に単純で、私たちが子供の頃に足し算 (+)、引き算 (-)、乗算 (*)、除算 (/) を学んだのと同じように、数式を使って次のように表現します。

このように、パディング、マージン、パーセンテージを組み合わせて使用すると、問題を解決できます。

たとえば、マージンは 20 ピクセルです。次に、

.haorooms {   
  width: calc(expression);   
}

ログイン後にコピー

と書くことも、次のように使用することもできます:

.haorooms{   
  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！   
}

ログイン後にコピー

例
例 1: マージンを含むページ上に配置されたブロック要素

.box {   
    background: #f60;   
    height: 50px;   
    padding: 10px;   
    border: 5px solid green;   
     width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);   
    width:-webkit-calc(100% - (10px + 5px) * 2);   
    width: calc(100% - (10px + 5px) * 2);   
}

ログイン後にコピー

例 2: フォームのサイズを自動的に変更するそしてコンテナに適応します

.banner {   
  position:absolute;   
  left: 40px;   
  width: -moz-calc(100% - 80px);   
  width: -webkit-calc(100% - 80px);   
  width: calc(100% - 80px);   
  border: solid black 1px;   
  box-shadow: 1px 2px;   
  background-color: yellow;   
  padding: 6px;   
  text-align: center;   
}

ログイン後にコピー

input {   
  padding: 2px;   
  display: block;   
  width: -moz-calc(100% - 1em);   
  width: -webkit-calc(100% - 1em);   
  width: calc(100% - 1em);   
}     

#formbox {   
  width: -moz-calc(100%/6);   
  width: -webkit-calc(100%/6);   
  width: calc(100%/6);   
  border: 1px solid black;   
  padding: 4px;   
}

ログイン後にコピー

以上がCSS3 の calc() プロパティを使用して計算でサイズ値を表現する方法の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。