要素の幅（高さ）の適応を実現する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 を構築する方法