CSSレイアウトポジショニング+装飾（1）Webページの一般的なレイアウト方法、ポジショニングの一般的なアプリケーションシナリオ、ポジショニングの初期経験、相対ポジショニング、

プログラミング 2022-04-05 00:14:09 訪問数: null

◆ポジショニングの一般的なアプリケーションシナリオを知ることができます◆
さまざまなポジショニング方法の特徴を知ることができます完全な円とカプセルボタンの効果を完成させる要素自体を隠すために表示と可視性の違いを知ることができます


1.ポジショニング

目標：ポジショニングの一般的なアプリケーションシナリオを伝え、さまざまなポジショニング方法の特徴を伝えることができるようにすること

1.1Webページの一般的なレイアウト

インライン要素/ラインピンチ要素は、1行に複数の要素を表示します-"水平レイアウト

  1. 標準ストリーム
  2. 独自の線上のブロックレベルの要素→垂直レイアウト
  3. インライン要素/インラインブロック要素が1行に複数表示→水平レイアウト
    フロート
  4. 元々垂直に配置されていたブロックレベルの要素を水平レイアウトに作成
    できます。元々垂直に配置されていたブロックレベルの要素を水平レイアウトに作成できます。
  5. 位置
  6. 要素はページのどこにでも自由に配置できます
  7. 通常、ボックス間のスタックに使用されます

配置により、要素をWebページのどこにでも自由に配置できます。これは、通常、ボックス間のスタックに使用されます。

1.2ポジショニングの一般的なアプリケーションシナリオ

  1. ボックス間の積み重ねの問題を解決できます。
    配置後の要素は最高レベルであり、他のボックスの上に積み重ねることができます
  2. ボックスは常に画面上の特定の位置に固定できます

まとめ

➢ポジショニングの一般的なアプリケーションシナリオは何ですか？

  1. ボックス間の積み重ねの問題を解決する→配置後、要素レベルが最も高く、他のボックスに積み重ねることができます
  2. ボックスは常に画面上の特定の位置に固定できます

2.1ポジショニングの最初の経験

要件：ページには2つのボックスがあり、画像の効果を完成させる必要がありますが、どのように行うことができますか？
➢ボックス間の積み重ねの問題については、ポジショニングを使用して完了することをお勧めします。
ボックスとボックスの間の積み重ねの問題については、ポジショニングを使用して完了することをお勧めします
ここに画像の説明を挿入

2.2ポジショニングを使用する手順

  1. ポジショニング方法を設定する
    ➢プロパティ名：position➢
    共通のプロパティ値：
    ここに画像の説明を挿入
    static、relativemabsolute、固定固定ポジショニング、固定ポジショニング固定
  2. オフセット
    値の設定➢オフセット値の設定は2方向に分かれており、水平方向と垂直方向に1つずつ選択できます。使用する水平方向と垂直方向のいずれかを選択できます
    。

    ここに画像の説明を挿入

まとめ

➢ポジショニングを使用する手順は何ですか？

  1. 測位方法を設定します：position
  2. ここに画像の説明を挿入
  3. オフセット値を設定します。水平+垂直それぞれの近くに1つずつ取ります
    ここに画像の説明を挿入

3.1静的ポジショニング

➢はじめに：静的ポジショニングはデフォルト値であり、これは以前から知られている標準フローです。
➢コード：位置：静的;
➢注：

  1. 静的ポジショニングは以前の標準フローであり、方向属性を介して移動することはできません
  2. 後述するポジショニングには静的ポジショニングは含まれませんが、一般的には後者を指します：相対、絶対、固定

静的ポジショニングは以前の標準フローであり、方位角属性を介して移動することはできません。後述のポジショニングには静的ポジショニングは含まれませんが、一般的に後者のカテゴリ（相対、絶対、固定）を指します。

まとめ

➢静的ポジショニングは、方向属性を介して移動できますか？
•いいえ、静的に配置された要素はデフォルトの標準ストリームの場合です
静的に配置された要素はデフォルトの標準ストリームの場合であり、静的に配置された要素はデフォルトの標準ストリームの場合です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
    
    
            /* 静态定位, 默认值, 标准流 */
            position: static;
            left: 100px;
            top: 200px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

4.1相対ポジショニング

前の位置を基準にして移動
➢はじめに：自己愛的なポジショニング、前の位置を基準にして移動
➢コード：位置：相対;
➢機能：

  1. 動きを実現するには、方向属性と連携する必要があります
  2. 元の位置に対して移動します
  3. ページ内の場所を占有する→適応外使用なし
    ➢適用シナリオ：
  4. アブソリュートポジショニンググループCP（子アブソリュートファーザーフェーズ）との連携
  5. 小さな動きのために

まとめ

➢相対位置決め位置の特性値は？
•相対
➢相対的なポジショニングは、動きを実現するために方向属性と連携する必要がありますか？
•移動を実現するには、方向プロパティと調整する必要があります
➢相対的に配置された要素は、誰に対して移動されますか？
•元の位置に対して移動する
➢比較的配置された要素がWebページ内の場所を占めていますか？
•ページ上の位置を占める→適応外使用なし
相対的に配置された要素は元の位置に対して移動し、相対的に配置された要素は適応外ではなくページ上の位置を占めます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 如果left和right都有, 以left为准; top和bottom都有以top 为准 */
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
    
    
            position: relative;
            right: 200px;
            bottom: 400px;
            left: 100px;
            top: 200px;

            

            /* 
                1. 占有原来的位置
                2. 仍然具体标签原有的显示模式特点
                3. 改变位置参照自己原来的位置
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

おすすめ

転載: blog.csdn.net/weixin_43428283/article/details/123549249
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com