ウェブサイトレイアウトにおける CSS の計算関数 calc の例

calc は数値を計算するために使用される CSS 関数です。長さ、角度、時間などを計算できます。 + 、 - 、 * 、 / 、括弧をサポートします。使用時に注意すべき点は、プラス記号とマイナス記号の前後にスペースが必要であることです。 calc はCSS の柔軟性を大幅に向上させます。いくつかの特殊なレイアウトに便利です。

表示例の効果

caclレイアウトを使用した例

#div1の背景が#div2の表示領域まで拡張され、 #div2に固定の 60 ピクセルが表示される効果を作成したいと思います。つまり、黒枠の幅は60pxです。 #div1の幅に関係なく。

CSSコード

#div1 {
    幅: 100%;
    最小幅: 400px;
    アウトライン：青;
}
#div2 {
    幅: 300ピクセル;
    マージン: 0 自動;
    アウトライン: 1px 実線 #ccc;
    色: 白;
}

HTMLコード

<div id="div1" クラス="cw">
    <div id="div2">
        テスト
    </div>
</div>

解決

.cw {
    背景:青の線形グラデーション(
    右に赤の計算(50% - 150px + 60px)、
    透明度計算(50% - 150px + 60px)
    );
}

cacl 互換性

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: iframeを透明にするパラメータ

>>: JavaScript は div マウスドラッグ効果を実装します

ウェブサイトレイアウトにおける CSS の計算関数 calc の例

経験者のHTMLの書き方と理由の分析

床スクロール効果を実現する js

折りたたまれたテーブル行要素のバグ

ハイパーコネクションの4つの状態の適用の詳細な説明

Xftp のダウンロードとインストールのチュートリアル (グラフィックチュートリアル)

ElementUIはel-formフォームリセット機能ボタンを実装します

5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます

Oracle Rownum 書き込みに似た MySQL の詳細な例

MySQL セキュリティ管理の詳細

JavaScript スコープチェーンの基本原理のグラフィカルな説明

推薦する

Centos7でポートを開く方法

Dockerコンテナを閉じずに終了する方法の詳細な説明

MySQL マスタースレーブデータが矛盾しています。プロンプト: Slave_SQL_Running: 解決策はありません

Nginxドメイン名転送のhttpsアクセスの実装

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

Vue-cliフレームワークはタイマーアプリケーションを実装します

docker-compose ネットワーク設定についての簡単な説明

バランスの取れたデジタルスクロール効果を実現するJavaScript

Linux 環境で crontab コマンドを使用して、スケジュールされた定期的な実行タスクを設定します (PHP 実行コードを含む)

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

Vue で v-for を更新する方法

Mysql でよく使用される時間、日付、変換関数の概要

Vue 学習 - VueRouter ルーティングの基礎

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル

dockerエラーの原因分析終了しました (1) 4分前