ウェブサイトレイアウトにおける 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 マウスドラッグ効果を実装します

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

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

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

Dockerコンテナが外部ネットワークにpingできない問題を解決する

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

複数サーバーの負荷分散を実現するためのNginx構成

Nginx http を https にアップグレードする手順を完了する

Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

VS2019をMySQLデータベースに接続するプロセスと一般的な問題の概要

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

Webフロントエンド開発CSS関連チームコラボレーション

nginx で正規表現を使用してワイルドカードドメイン名を自動的に一致させる方法

推薦する

Angular の 12 の典型的な問題について簡単に説明します

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

Vue で eslint 検出をオフにする方法 (複数の方法)

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

時刻を保存するために適切な MySQL の datetime 型を選択する方法

JavaScript は詳細なコードで星座クエリ機能を実装します

HTMLとXHTML、HTML4とHTML5のタグの違いについて簡単に紹介します。

Zabbix はどのようにして ssh 経由でネットワークデバイスデータを監視および取得するのでしょうか?

Mysql | ワイルドカード（%、_ など）を使用したファジークエリの詳細な説明

デザイナーの「職業病」について

React Nativeはモニタリングジェスチャーの上下プル効果を実現します

上部の固定divは半透明効果に設定できます

Tomcat で静的リソースを処理するチュートリアル

面白いウェブサイトをデザインするための方法とテクニック（写真）

Nginx シグナル制御