calc() では何ができるのでしょうか? CSSで柔軟なレイアウトを実装する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

calc() では何ができるのでしょうか? CSSで柔軟なレイアウトを実装する

青灯夜游

Nov 01, 2018 pm 04:03 PM

calc()css3アダプティブレイアウト

この記事の内容は、calc() で何ができるのかを紹介することです。 CSSで柔軟なレイアウトを実現します。困っている友人は参考にしていただければ幸いです。

美しい CSS アダプティブレイアウトの作成は、Web アプリケーション内のすべてのコンテンツにスペースを割り当てることから始まります。高さフィーチャーには、長さの単位を組み合わせて寸法を指定する機能が必要です。

たとえば、領域の 50% に加えて固定量のスペース (例: 10px) を予約するにはどうすればよいですか?

以前は、上記の効果を実現するには非常に複雑な CSS スタイルを設定する必要がありましたが、今では calc() 属性を使用して簡単にこれを行うことができます。

また、長さや数値が使用される場所ならどこでも calc() 属性を使用できます。たとえば、 calc() を使用して位置を指定したり、 rgb() の色の値を設定したりできます。スタイルシート内でには多くの優れた用途があります。

CSS3 の新しい属性 calc() が柔軟なレイアウトを実装する方法を紹介します。 [推奨されるビデオ学習: css3 チュートリアル ]

calc() は何ができるのですか?

calc() プロパティは、CSS の長さまたは数値を含むスタイルシート内のどこでも使用できます。 calc() の使用方法については、以前の記事 [calc の使い方?] を参照してください。 ] に詳細な紹介がありますので、必要に応じて参照してください。

calc() 関数は、レイアウトをより柔軟にするための 2 つの主要な関数を提供します。それは、パーセンテージと絶対値の混合、および混合単位の使用です。

パーセンテージと絶対単位の混合

パーセンテージと絶対単位を混合する例を見てみましょう。利用可能な領域の 50% から固定ピクセル数を引いた領域を割り当てたいとします。その場合、次のように記述できます。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.demo {
				width: 400px;
				/*height: 200px;*/
				border: 1px solid #000;
				margin: 100px auto;
			}
			
			.cx {
				width: calc(100% - 100px);
				background-color: palevioletred;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="cx">这是一段测试文字，背景颜色总是比总面积的50%还要小100像素</div>
		</div>

</html>

背景色が赤の場合、次のようになります。

calc() では何ができるのでしょうか? CSSで柔軟なレイアウトを実装する

親のサイズを小さくすると、次のようになります。

calc() では何ができるのでしょうか? CSSで柔軟なレイアウトを実装する

calc() を使用する利点は非常に明白であることがわかります。。この方法でさまざまな値の型を組み合わせることで、Web アプリケーションはさまざまなサイズのデバイス上のレイアウトを以前よりも詳細に制御できるようになります。

混合単位の使用

もう 1 つの利点は、異なる測定値の単位を組み合わせて最終的なサイズを取得できることです。たとえば、「em」単位と「px」単位を混合することで、現在のフォントサイズを基準にしてサイズを設定できます。

.bar {
  height: calc(10em + 3px);
}

値を組み合わせた良い例を見てみましょう。

calc() では何ができるのでしょうか? CSSで柔軟なレイアウトを実装する

calc() を使用すると、-、*、/ 記号を使用して値を加算、減算、乗算、除算できるため、さまざまな可能性が可能になります。 Calc() は、CSS の長さや数値の計算と設定など、どこでも使用できます。 Calc() を使用して角度と周波数を計算することもできます。

注: Chrome 19 (開発チャネルビルド) で calc() 属性を使用する場合は、バージョン 8 以降の Firefox では、-webkit- プレフィックスを追加する必要があります。 -moz- プレフィックス。Internet Explorer 9 以降のバージョンでは、プレフィックスを追加せずに使用できます。

要約: 以上が、この記事で紹介する CSS3 の calc() 属性を使用した CSS フレキシブルレイアウトの実装の全内容です。皆さんの学習に役立つことを願っています。

以上がcalc() では何ができるのでしょうか? CSSで柔軟なレイアウトを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。