◆構造的な疑似クラスセレクターを使用してHTMLの要素を選択できるclearfloatメソッドを使用
できる

1.構造疑似クラスセレクター

目標：構造的な疑似クラスセレクターを使用してHTML内の要素を検索できるようにする

機能と利点：
役割：HTMLの構造的関係に基づいて要素を検索します
利点：HTMLのクラスへの依存を減らし、コードをクリーンに保つのに役立ちます
シナリオ：親セレクターで子要素を検索するためによく使用されます
セレクタ

ここに画像の説明を挿入
nth-child（n）{}
nth-last-child（n）{} nの
注意点

：
6。nは：0、1、2、3、4、5、6、...
7.パスnCan一般的な式を形成する

（拡張）構造疑似クラスセレクターのエラーが発生しやすいポイント

ここに画像の説明を挿入

<!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>
        * {
    
    
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .login {
    
    
            width: 356px;
            /* height: 300px;
            background-color: pink; */
            margin: 50px auto;
            /* 让logo向下移动 */
            padding-top: 10px;
        }

        /* 定义一个负责内容居中的类, 将来哪个内容居中调佣 */
        .center {
    
    
            text-align: center;
        }

        .login h1 a {
    
    
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #ff4c00 ;
        }

        .login h2 {
    
    
            margin-top: 35px;
            line-height: 1;
            font-size: 26px;
            font-weight: 400;

            margin-bottom: 48px;
        }

        .login input {
    
    
            width: 356px;
            height: 50px;
            border: 1px solid #e0e0e0;
            margin-bottom: 15px;
            padding-left: 13px;
        }

        .login button {
    
    
            width: 356px;
            height: 50px;
            background-color: #ff4c00;
            /* border: 0; */
            border:none;
            color: #fff;
            font-size: 14px;
        }
    </style>    
</head>
<body>
    <div class="login">
        <h1 class="center">
            <a href="#"><img src="./images/mi-logo.png" alt=""></a>
        </h1>

        <h2 class="center">小米账号登录</h2>

        <!-- 表单域, 未来加了form才有真正的发送的功能 -->
        <form action="">
            <input type="text" placeholder="请输入邮箱">
            <input type="password" placeholder="请输入密码">
            <button>登录</button>
        </form>
    </div>
</body>
</html>

<!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>
        /* 选中第一个 */
        /* li:first-child {
    
    
            background-color: green;
        } */

        /* 最后一个 */
        /* li:last-child {
    
    
            background-color: green;
        } */

        /* 任意一个 */
        /* li:nth-child(5) {
    
    
            background-color: green;
        } */

        /* 倒数第xx个 */
        li:nth-last-child(1) {
    
    
            background-color: blue;
        }
    </style>
</head>
<body>

    <!-- ul>li{
    
    这是第$个li}*8 -->
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

li：最初の子

（理解）n番目のタイプの構造的疑似クラスセレクター

E：nth-of-type（n）{}は、同じタイプの親要素の子要素の範囲でのみ選択され、nに一致します
➢違い：
•：nth-child→すべての子の数を直接カウントし
ます•： nth-of-type→最初にこのタイプで一致するサブ要素の束を見つけ、次にこのサブ要素の束の数を数えます
最初にこのタイプのリソースの複合束を見つけ、次にこの束の数を数えますサブ要素の
ここに画像の説明を挿入

<!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>
        /* ** 偶数 */
        /* li:nth-child(2n) { */

            /* *** 奇数 */
        /* li:nth-child(2n+1) { */
            /* 找到前3个 */
        /* li:nth-child(-n+3) { */

            /* *** 4的倍数 */
        li:nth-child(4n) {
    
    
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

li：nth-child（4n）{background-color：green;}

2.疑似要素

目標：疑似要素を使用してWebページにコンテンツを作成できるようにする
➢疑似要素：一般的なページの非メインコンテンツは疑似要素を使用できます
➢違い：

要素：HTMLセットタグ
疑似要素：CSSによってシミュレートされたラベル効果

要素：HTMLで設定されたタグ、疑似要素、CSでシミュレートされたタグ効果
➢タイプ
ここに画像の説明を挿入
:::before
親要素コンテンツの先頭に疑似要素を追加::after親要素コンテンツの末尾に疑似要素を追加
➢注：
3。コンテンツ属性を有効にするには設定する必要があります
4.疑似要素はデフォルトでインライン要素です

有効にするにはcontent属性を設定する必要があります。疑似要素はデフォルトでインライン要素です

まとめ

➢疑似要素の必須属性は何ですか？
•コンテンツ属性
➢疑似要素が作成された後のデフォルトの表示モードは何ですか？
•
インライン要素疑似要素に追加する必要のある属性：content属性。疑似要素の作成後、デフォルトの表示モードはインライン要素
です。疑似要素に追加する必要のある属性はcontent属性です。。

<!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>
        /* 第一个li里面的a */
        li:first-child a {
    
    
            /* background-color: green; */
            color: red;
        }
    </style> -->
    <style>
        /* 找到第一个li 里面的  第三个a  设置文字颜色是红色 */
        li:first-child a:nth-child(3) {
    
    
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">这是第1个li里面的a1</a>
            <a href="#">这是第1个li里面的a2</a>
            <!-- 选中第三个a -->
            <a href="#">这是第1个li里面的a3</a>
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <li><a href="#">这是第2个li里面的a</a></li>
        <li><a href="#">这是第3个li里面的a</a></li>
        <li><a href="#">这是第4个li里面的a</a></li>
        <li><a href="#">这是第5个li里面的a</a></li>
        <li><a href="#">这是第6个li里面的a</a></li>
        <li><a href="#">这是第7个li里面的a</a></li>
        <li><a href="#">这是第8个li里面的a</a></li>
    </ul>
</body>
</html>

li：first-child a：nth-child（3）{color：red;}

<!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>
        .father {
    
    
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
    
    
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: '';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }

        .father::after {
    
    
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->

    <!-- 找父级, 在这个父级里面创建子级标签 -->

    <div class="father">爱</div>

    <!-- 老鼠爱大米 -->
</body>
</html>

。Father :: before { content：''; color：green; width：100px; height：100px; background-color：blue; display：block;}は、幅と高さが有効でない場合、デフォルトでインライン要素です。デフォルトはインライン要素です。無効な.father ::after {content：'rice';} 。父：前{コンテンツ：'';色：緑;幅：100px;高さ：100px;背景色：青;}

3.標準フロー

目標：標準ストリームのデフォルトのレイアウトと特性を理解できるようにする
➢標準ストリーム：ドキュメントストリームとも呼ばれ、ブラウザが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>
        /* img {
    
    
            float: left;
        } */

        div {
    
    
            width: 100px;
            height: 100px;
        }

        .one {
    
    
            background-color: pink;
            float: left;
        }

        .two {
    
    
            background-color: skyblue;
            /* flr */
            /* float: right; */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1. 图文环绕 -->
    <!-- <img src="./images/1.jpg" alt="">
    阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了 -->


    <!-- 2. 网页布局: 块在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

<!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>
        /* 浮动的标签  顶对齐 */
        /* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
        .one {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;

            float: left;

            margin-top: 50px;
        }

        .two {
    
    
            width: 200px;
            height: 200px;
            background-color: skyblue;

            float: left;

            /* 因为有浮动, 不能生效 - 盒子无法水平居中 */
            margin: 0 auto;
        }

        .three {
    
    
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

フローティング：1行に配置すると、幅と高さが有効になり、フローティングラベルにはインラインブロックの特性があります
。two {width：200px; height：200px; background-color：skyblue; float：left; margin：0 auto;

4.フローティング

1.1フローティングの役割

➢初期の役割：画像とテキストの折り返し
ここに画像の説明を挿入
➢現在の役割：Webページのレイアウト
•シナリオ：垂直レイアウトボックスを水平レイアウトにします。たとえば、左側と右側に1つずつあります。

2.1フローティングコード

➢プロパティ名：
float➢プロパティ値：
ここに画像の説明を挿入

まとめ

フロートの機能は何ですか？

初期の役割：グラフィックとテキストサラウンド
現在の機能：レイアウトに使用され、垂直レイアウトボックスを水平レイアウトに変換します。たとえば、左側に1つ、右側に1つ
➢左フローティングのプロパティは何ですか。右フロートの特性は何ですか？
フロート左：フロート：左
フロート右：フロート：右

レイアウトについては、縦のレイアウトボックスを横のレイアウト（左側と右側など）にします。

3.1フローティングの特徴

浮遊要素は標準の流れから外れ（略語：適応外）、標準の流れの中で位置を占めません
。地面から空中に浮くのと同じです。
フローティング要素は、標準フローの半分のレベルであり、標準フローの要素をカバーできます
フローティングを見つけるためにフローティングすると、次のフローティング要素は前のフローティング要素の後ろで左右に浮きます
フローティング要素には特別な表示効果があり
ます•1行で複数を表示でき
ます•幅と高さを設定できます

フローティングを見つけるためにフローティングすると、次のフローティング要素は前の要素にフローティングします➢注：
•フローティング要素はtext-align：centerまたはmargin：0autoを渡すことができません

まとめ

➢フローティングエレメントの特徴は何ですか？

フローティング要素にはラベルが付けられておらず、標準フローの場所を占めることはありません
フローティング要素は標準フローの半分のレベルであり、標準フローの要素を上書きする可能性があります
フローティングを見つけるためにフローティングすると、次のフローティング要素は前のフローティング要素の後ろで左右に浮きます
フローティング要素には特別な表示効果があります：①1行で複数を表示できます②幅と高さを設定できます

CSSレイアウトfloat（1）構造体疑似クラスセレクター。N番目のタイプの構造体疑似クラスセレクター。疑似要素の標準ストリームフロート