4.1要素表示モードの変換

➢目的：要素のデフォルトの表示特性を変更して、要素がレイアウト要件を満たすようにする
➢構文：
ここに画像の説明を挿入
inline-block、inline、block;

4.2まとめ

➢どの属性がブロックレベルの要素に変換されますか？
•display：
block➢インラインブロックに変換された要素のプロパティは何ですか？
•display：inline-
block➢インライン要素に変換するプロパティは何ですか？
•表示：インライン

拡張1：HTMLネスト仕様に関する注意

ブロックレベルの要素は通常、大きなコンテナとして使用され、ネストできます：テキスト、ブロックレベルの要素、インライン要素、インラインブロック要素など
。➢ただし、div、p、hおよびその他のブロックレベルの要素をネストしないでください。 p tag
div、p、h2
。任意の要素をタグ内にネストできます
。➢ただし、タグをタグとネストすることはできません
。拡張2：センタリング方法の概要
ここに画像の説明を挿入
line-height：単一行のテキストマージン：0 auto;ブロックレベルの要素、注意：
現在の要素に直接設定された
テキスト-align：テキスト、インライン要素、スパン、インラインブロック要素ionput、img
上記の要素を水平方向に中央揃えにする必要がある場合は、直接上記の要素の親要素を設定し、

<!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>
</head>
<body>
    <!-- p 和 h标题不能相互嵌套 -->
    <!-- <p>
        <h1>一级标题</h1>
    </p> -->
    <!-- p里面不能包含div -->
    <p>
        <div>divdiv</div>
    </p>
</body>
</html>

pタグとhタグを相互にネストすることはできません

4.CSS機能

1.1継承の概要

デフォルトの後続親要素のスタイル特性
➢機能：子要素には、デフォルトで親要素のスタイルを継承するという特性（子は親のビジネスを継承する）
と、継承できる共通の属性（テキスト制御属性は継承）
テキストコントロール属性は継承できますが、

色
font-style、font-weight、font-size、font-family
text-indent、text-align
行の高さ
……
color、font-style、font-weight、font-size、font-family、text-indent、text-alig➢
注：
•デバッグツールを使用して、スタイルを継承できるかどうかを判断できます。

1.2まとめ

➢相続の特徴は何ですか？
•子要素はデフォルトで親要素のスタイルを継承します
。➢継承できる共通の属性は何ですか。

色
font-style、font-weight、font-size、font-family
text-indent、text-align
行の高さ

色、フォントスタイル、フォントの太さ、フォントサイズ、フォントファミリー、

（拡張）継承されたアプリケーション

font-size：同じ異なるブラウザのデフォルトのテキストサイズ
➢利点：コードをある程度減らすことができます
➢一般的なアプリケーションシナリオ：

list-style：none属性をulに直接設定して、リストのデフォルトのドットスタイルを削除できます。
bodyタグの統一フォントサイズを直接設定して、さまざまなブラウザのデフォルトのテキストサイズを統一します。bodyタグに
同じフォントサイズを設定して、さまざまなブラウザのテキストサイズを統一します。デフォルトのテキストサイズ

（拡張）継承失敗の特殊なケース

➢要素にブラウザのデフォルトスタイルがある場合、継承は引き続き存在しますが、ブラウザのデフォルトスタイルが最初に表示されます

タグの色は継承されて無効になります
。実際、color属性は継承されますが、ブラウザによって設定されたデフォルトのスタイルによって上書きされます。
hシリーズタグのfont-sizeは継承され、無効になります
。実際、font-size属性は継承されますが、ブラウザによって設定されたデフォルトのスタイルによって上書きされます。

<!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>
        /* 控制文字的属性都能继承; 不是控制文字的都不能继承 */
        div {
    
    
            color: red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </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>
        div {
    
    
            color: red;
            font-size: 12px;
        }

        a {
    
    
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>

a-colorプロパティは継承されますが、ブラウザのデフォルトスタイルで上書きされます
。h-font-sizeは失敗します。実際、font-sizeプロパティは継承されますが、ブラウザのデフォルトスタイルで上書きされます。

2.1カスケードの概要

➢特徴：

同じラベルに異なるスタイルを設定する→スタイルは積み重ねられます→ラベル上で一緒に機能します
同じラベルに同じスタイルを設定→スタイルは積み重ねられて覆われます→最後に書かれたスタイルが有効になります
➢注：
スタイルが競合する場合、セレクターの優先度が同じである場合にのみ、カスケードによって結果を判断できます。

スタイルが競合する場合、セレクターの優先度が同じである場合にのみ、カスケードによって結果を判断できます。

2.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>
        div {
    
    
            color: red;
            color: green;
        }

        .box {
    
    
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

V.包括的なケース

1.通常のナビゲーション-レンダリング

ここに画像の説明を挿入

<!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>
        /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
        a {
    
    
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        a:hover {
    
    
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a*5 -->
    <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

2.カラフルなナビゲーション-レンダリング