CSS3 の calc() プロパティを使用して寸法を表現する方法-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-20 17:24:45

オリジナル

1951 人が閲覧しました

この記事では主に 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 サイトをご覧ください。