Css3

[CSSノート] -calc（）を使用して幅と高さ（vw / vh）を計算します



Calculate Width



[CSSノート] -calc（）を使用して幅と高さ（vw / vh）を計算します

calc（）とは何ですか？

簡単に言えば、これはCSS3の新しい関数であり、calculateの略語です。幅/高さを動的に計算するには、calc（）を使用して、要素の各要素[マージン、境界線、パディング、フォントサイズ]などの値を設定できます。

Calc（）構文

グラム構文は単純な4ステップの操作です。



  1. '+'、 '-'、 '*'、および '/'の4つの操作を使用します
  2. パーセンテージ、px、em、remなどを使用できます。
  3. 計算にさまざまな単位を使用して混合できます
  4. 式に「+」と「-」がある場合、その前後にスペースが必要です。たとえば、「width：calc（12％+ 5em）」は間違いではありません。
  5. 式に「*」と「/」が含まれている場合、前後にスペースを入れることはできませんが、スペースを残すことをお勧めします。

calc（）の使用

主に、マージンが10px、幅が100％の要素など、不確かさの値を計算するために使用されます。これをどのように設定しますか？設定されている場合

width: 100% margin: 10px Copy code

このボックスがオーバーフローしていることがわかりますが、どのように解決しますか？ calc関数を使用できます。



width: 800px width: calc(100% - (10 *2)px) margin: 10px Copy code

vwとvhとは何ですか？

Vw、vh、vmin、vmaxは一種のウィンドウ単位であり、相対単位でもあります。これは、ページの親ノードまたはルートノードではありません。これは、ビューポートのサイズと、1％に相当する単位1によって決まります。ビューポートは、ブラウザが実際にコンテンツを表示する領域です。つまり、ツールバーやボタンを含まないWebブラウザです。

具体的な説明は次のとおりです。

  1. Vw：ウィンドウ幅のパーセンテージ（1vwはウィンドウの幅が1％であることを表します）
  2. Vh：ウィンドウの高さのパーセンテージ
  3. Vmin：現在のVwとVhの小さい方を取ります
  4. Vmax：現在のVwとVhの大きい方を取ります

vw、vh、および％パーセンテージの違い

（1）％は親要素のサイズに対して設定された比率であり、vw、vhはウィンドウサイズによって決定されます。 （2）vw、vhには高さを直接取得できるという利点があり、体の高さを設定せずに％を使用すると、可視領域の高さを正しく取得できないため、かなり良い利点です。



Calcとvh / vwの組み合わせ

上記では、％をcalcと組み合わせて使用​​して目的の効果を実現していますが、なぜvwとvhを導入するのですか？上記では、％とvw、vh、％の差は、本体の高さを設定しないと、表示領域の高さを正しく取得できません。

計算+ vw計算幅
width: 800px /* fallback for b*/ width: -moz-calc(100vw - (2 * 10)px) width: -webkit-calc(100vw -(2 * 10)px) width: calc(100vw - (2 * 10)px) Copy code
Calc + vhは高さを計算します
height: 800px height: -moz-calc(100vh - (2 * 10)px) height: -webkit-calc(100vh - (2 * 10)px) height: calc(100vh - (2 * 10)px) Copy code

転載：https：//juejin.im/post/5c18d8e2f265da61407ed721