CSS3 の calc() プロパティを使用して寸法を表現する方法

この記事では主に CSS3 での calc() 属性を使用してサイズを表現する方法を紹介します。学校で数学の問題を解くときと同じように、ある程度のアダプティブ レイアウトを実現するために数式を使用します。 次に、CSS3 で calc() 属性を使用する方法を紹介します。数式でサイズ値を表現するには

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

calc() は CSS3 の新しく追加された属性で、算術式を使用して長さの値を表現できるようになります。つまり、これを使用して p の幅を定義し、マージン、パディング、ボーダーなどを設定できます。

calc() の操作ルール:

1. 四則演算「+」、「-」、「*」、「/」を使用します。
2. パーセント、ピクセル、エム、レムなどの単位を使用できます。 .;
3. 計算にはさまざまな単位を使用できます。

使い方

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

.haorooms {   
  width: calc(expression);   
}

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

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

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

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

.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);   
}

例

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

.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;   
}

例 2: フォームのサイズを自動的に変更し、次のように適応します。コンテナ

rrree

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;   
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

フレームごとのアニメーション効果を実現するための CSS3 アニメーションについて

CSS3 box-reflect を使用して反射効果を作成する方法

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