要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します

1. ポジショニング

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>適応型</title>
    <スタイル>
        *{
            パディング: 0;
            マージン: 0;
        }
        。左{
            背景: 赤;
            幅: 200ピクセル;
            高さ: 200px;
            position: absolute;/*位置決め*/
            左: 0;
            トップ:0;
        }
        。右{
            背景: 青;
            高さ: 200px;
            左マージン: 210px;
        }
    </スタイル>
</head>
<本文>
    <div class="left">
        固定幅</div>
    <div class="right">
        適応型
</本文>
</html>

2. 浮遊

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>適応型</title>
    <スタイル>
        *{
            パディング: 0;
            マージン: 0;
        }
        。左{
            背景: 赤;
            幅: 200ピクセル;
            高さ: 200px;
            フロート: 左;/*フロート*/
        }
        。右{
            背景: 青;
            高さ: 200px;
            左マージン: 210px;
        }
    </スタイル>
</head>
<本文>
    <div class="left">
        固定幅</div>
    <div class="right">
        適応型
</本文>
</html>

3. マージン

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>適応型</title>
    <スタイル>
        *{
            パディング: 0;
            マージン: 0;
        }
        。左{
            背景: 赤;
            幅: 200ピクセル;
            高さ: 200px;
        }
        。右{
            背景: 青;
            高さ: 200px;
            margin-top: -200px;/*マージン*/
            左マージン: 210px;
        }
    </スタイル>
</head>
<本文>
    <div class="left">
        固定幅</div>
    <div class="right">
        適応型
</本文>
</html>

2. CSS3の弾性ボックスモデルが適応を実現

1. 上部と下部の高さは固定、中間の高さは適応

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        本文、html{
            高さ: 100%;
        }
        #含む{
            ディスプレイ: フレックス;
            flex-direction: column;/*列の垂直方向*/
            height: 100%;/*フルスクリーン効果: この要素とその親要素および html、本体 height: 100%*/
        }
        #トップ{
           高さ: 200px;
            背景: 赤;
        }
        #中心 {
            フレックス: 1;
            背景: 青;
        }
        #底{
            高さ: 100px;
            背景: 緑;
        }
    </スタイル>
 
</head>
<本文>
<div id="contain">
    <div id="top">こんにちは</div>
    <div id="center">こんにちは</div>
    <div id="bottom">こんにちは</div>
</div>
</本文>
</html>

2. 左の幅は固定で右の幅は適応型

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
 
        #含む {
            display: flex; /*親要素がこの属性を設定します*/
        }
 
        #左 {
            幅: 100ピクセル;
            高さ: 200px;
            背景: #fff8a8;
            右マージン: 10px;
        }
 
        #右 {
            flex: 1; /*割合/コピー数*/
            高さ: 200px;
            背景: #ff9bad;
        }
    </スタイル>
</head>
<本文>
<div id="contain">
    <div id="left"></div>
    <div id="right"></div>
</div>
</本文>
</html>

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

<<:  ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください

>>:  docker を使って sonarqube を構築する方法

推薦する

nginx設定ファイルの場所を見つける方法の詳細な説明

よく知らないサーバーの場合や、かなり前にインストールした場所を忘れてしまった場合、構成ファイルの場所...

デザインスキルを向上させる良い方法

いわゆる才能(左脳と右脳)つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...

マインスイーパゲームを実装するための jQuery プラグイン (1)

この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

MySQL のインデックスとデータ テーブルを管理する方法

目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...

フロートをクリアするための CSS メソッドの概要

フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...

DockerでPython環境をパッケージ化するプロセスの詳細な説明

docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...

sysbenchツールによるMySQLデータベースのパフォーマンステストの実装方法

1. 背景Sysbench は、システムのハードウェア パフォーマンスをテストできるストレス テスト...

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

Nodejs エラー処理プロセス記録

この記事では、接続エラー ECONNREFUSED を例に、Node.js がエラーを処理するプロセ...

Windows での Tomcat サーバーのインストールに関するチュートリアル

1 ダウンロードして準備するまず、公式ウェブサイトからTomcatをダウンロードする必要があります。...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

JavaScriptのプリミティブ値とラッパーオブジェクトの詳細な紹介

目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...